Javascript simple navigation bar click on the color change-CodePudding

The code is as follows:

<meta charset="utf-8">

<style type="text/CSS" & gt;
TAB {
Width: 600 px;
height: 30px;

}
Ul {
Width: 540 px;
height: 40px;
Border: 1 px solid red;

}
Li {
float: left;
width: 80px;
height: 40px;
Margin: 0 px; 20
cursor: pointer;
list-style: none;
line-height: 40px;
text-align: center;
}
The current {
Background - color: black.
color: white;
}
</style>

<body>

222 & lt;/li>
333 & lt;/li>
444 & lt;/li>

Var lis=document. QuerySelectorAll (" li ");
for(var i=0; iThe lis [I] onclick=function () {
for(var i=0; iThe lis [I] the className=' ';
}
Enclosing the className='current'
}
}
</script>

CodePudding user response:

Pro, this is the place to ask questions, don't leave here as notes... To take notes, can go to the post content management inside your

Then, give you another idea:

 
[]. ForEach. Call (document. QuerySelectorAll (" li "), function (li) {
Li. The onclick=function () {
Const current=document. QuerySelector (" li. The current ") 

If (current!=={
 this)Current. The className="" 
Enclosing the className="current" 
} 
} 
})

Have similar Babel - polyfill, you can direct: Array. The from (document. QuerySelectorAll (" li "). The forEach