<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin:0;padding: 0;list-style: none;text-decoration: none}
.nav{width: 100%;height: 3rem;background-color: #ddd}
.nav ul{width: 70%;height: 3rem;margin: 0 auto;}
.nav ul li{float: left;width: 14.28%;height: 3rem;text-align: center;line-height: 3rem;position: relative}
.nav li a{display: inline-block;width: 100%;}
.nav li span{height: 2px;width: 0;background-color: #000;position: absolute;top:2.9rem;left:50%;}
.active{background-color: red;}
</style>
</head>
<body>
<div class="nav">
<ul>
<li class="t active"><a href="#">星期一</a><span></span></li>
<li class="t"><a href="#">星期二</a><span></span></li>
<li class="t"><a href="#">星期三</a><span></span></li>
<li class="t"><a href="#">星期四</a><span></span></li>
<li class="t"><a href="#">星期五</a><span></span></li>
<li class="t"><a href="#">星期六</a><span></span></li>
<li class="t"><a href="#">星期日</a><span></span></li>
</ul>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(".t").hover(function(){
$("span",this).animate({
left:'0',
width:'100%',
right:'0'
},500);
},function(){
$("span",this).stop().animate({
left:'50%',
width:'0',
},200);
})
$('.t').click(function(){
$('li').removeClass('active');
$(this).addClass('active');
return false;
})
</script>
</body>
</html>The result is as follows:
