代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
tab{
width: 600px;
height: 30px;
}
ul{
width: 540px;
height: 40px;
border: 1px solid red;
}
li{
float: left;
width: 80px;
height: 40px;
margin: 0 20px;
cursor: pointer;
list-style: none;
line-height: 40px;
text-align: center;
}
.current{
background-color: black;
color: white;
}
</style>
</head>
<body>
<div id="" class="tab">
<ul>
<li class="current">111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
</div>
<script type="text/javascript">
var lis = document.querySelectorAll('li');
for(var i=0;i<lis.length;i++){
lis[i].onclick=function () {
for(var i=0;i<lis.length;i++){
lis[i].className = '';
}
this.className='current'
}
}
</script>
</body>
</html>
uj5u.com熱心網友回復：
親，這是問問題的地方，別把這里當成記筆記的……要記筆記，可以去內容管理里面自己發表文章然后，給你另一個思路：
[].forEach.call(document.querySelectorAll("li"), function (li) {
li.onclick = function () {
const current = document.querySelector("li.current")
if(current !== this){
current.className = ""
this.className = "current"
}
}
})
有類似babel-polyfill的話，可以直接:Array.from(document.querySelectorAll("li")).forEach
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/283957.html
標籤：JavaScript
下一篇：vue+ openlayers