JS + CSS implementa el cambio de pestaña
Echemos un vistazo al efecto de implementación. Vi al autor escribiendo en la cuenta oficial, lamentando la magia de CSS e imitándolo.
Código CSS:
ul{
list-style:none;
}
ul::before,
ul::after{
content:"";
display:table;
clear:both;
}
ul > li{
float:left;
padding: 0 15px;
font: 500 16px/30px "微软雅黑";
color:#000;
position:relative;
cursor:pointer;
transition: all .5s ease-in;
}
li::after{
content:"";
display:block;
position:absolute;
top:-2px;
left:100%;
width:0;
height:100%;
border-bottom:2px solid #000;
transition: all .3s ease-in;
}
li:hover::after{
left:0;
width:100%;
}
li:hover ~ li::after{
left:0;
}
.active{
color:#fff;
background:#000;
}
Código HTML + JS
<ul>
<li>Luffy</li>
<li>Zoro</li>
<li>Tony</li>
<li>Sanji</li>
<li>Usopp</li>
<li>Franky</li>
</ul>
<script>
const lis = document.querySelectorAll("li");
for(let i=0 ; i< lis.length ; i++) {
lis[i].addEventListener("click",function() {
for( var j = 0; j< lis.length; j++){
lis[j].className = ""
}
lis[i].className = "active"
})
}
</script>