css
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
}
a:visited{
color: #000;
}
ul{
width: 1026px;
font-size: 0;
margin: 100px auto;
padding: 0;
display: flex;
box-sizing: border-box;
text-align: center;
position: relative;
}
li{
font-size: 15px;
height: 54px;
box-sizing: border-box;
line-height: 54px;
width: 12.5%;
text-align: center;
}
li:hover a{
color: #00a1d6;
}
li a{
display: inline-block;
width: 100%;
height: 100%;
}
.block{
height: 2px;
background-color: #00a1d6;
width:5%;
position: absolute;
left: 35px;
bottom: 0;
transition: all .5s;
}
.active a{
color: #00a1d6;
}
li:nth-child(1):hover ~ .block{
left:35px !important;
}
li:nth-child(2):hover ~ .block{
left:163px !important;
}
li:nth-child(3):hover ~ .block{
left:291px !important;
}
li:nth-child(4):hover ~ .block{
left:419px !important;
}
li:nth-child(5):hover ~ .block{
left:547px !important;
}
li:nth-child(6):hover ~ .block{
left:675px !important;
}
li:nth-child(7):hover ~ .block{
left:803px !important;
}
li:nth-child(8):hover ~ .block{
left:931px !important;
}
</style>
html
<body>
<ul>
<li onclick="setActive(0)" class="active"><a>首页</a></li>
<li onclick="setActive(1)"><a>视频</a></li>
<li onclick="setActive(2)"><a>音乐</a></li>
<li onclick="setActive(3)"><a>动画</a></li>
<li onclick="setActive(4)"><a>影视</a></li>
<li onclick="setActive(5)"><a>小说</a></li>
<li onclick="setActive(6)"><a>话题</a></li>
<li onclick="setActive(7)"><a>我的</a></li>
<li class="block"></li>
</ul>
</body>
js
<script type="text/javascript">
function setActive(index){
var li = document.getElementsByTagName('li');
for (let i = 0; i < li.length; i++) {
const element = li[i];
if(i == index){
li[i].classList.add('active');
var block = document.getElementsByClassName('block')[0];
block.style.left = (128*i+35)+'px';
}else{
li[i].classList.remove('active');
}
}
}
</script>
