2024年12月09日 建站教程
1、div代码
<div class="nav">
<div class="on"></div>
<ul>
<li>首页</li>
<li>技巧</li>
<li>方法</li>
<li>扩展</li>
</ul>
</div>
2、css代码
* {
margin:0;
padding:0;
}
body {
background-color:#b6b3b3;
}
li {
list-style:none;
}
.nav {
width:440px;
height:60px;
margin:100px auto;
border-radius:70px;
position:relative;
}
.nav ul {
display:flex;
align-items:center;
}
.nav ul li {
width:100px;
height:50px;
line-height:50px;
box-sizing:border-box;
border-radius:10px;
text-align:center;
color:#333;
cursor:pointer;
margin: 0 5px
}
.nav .on{
width:100px;
height:50px;
border-radius:10px;
background:#f00;
position:absolute;
left:35px;
top:0;
z-index:-1;
transition:all .3s;
margin: 0 5px;
}
3、js代码
$(function() {
var left = 0;
$('.nav ul li').click(function() {
left = this.offsetLeft;
$('.nav .on').css({
left: left - 10 + 'px',
})
})
})
本文链接：http://so.lmcjl.com/news/19264/