起步版
HTML部分
<div class="box">
<ul>
<li class="com">Pivot1</li>
<li>Pivot2</li>
<li>Pivot3</li>
</ul>
</div>
CSS部分
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul {
display: flex;
flex-direction: row;
justify-content: space-around;
cursor: pointer;
margin: 150px auto;
width: 300px;
}
li {
list-style: none;
font-size: 25px;
padding: 10px 0;
}
.com {
border-bottom: 4px solid pink;
}
JavaScript部分
var lis = document.getElementsByTagName('li');
//排他思想
for(let i=0;i<lis.length;i++){
lis[i].addEventListener('click',function(){
for(let j=0;j<lis.length;j++){
lis[j].className='';
}
this.className='com';
});
}