先上效果, 代码引用了jquery的框架
复制代码
功能实现比较简单,代码如下所示:
html代码如下
<div class='tabchouse'> <!--设置元素位置-->
<ul> <!--元素内容-->
<li class='active'>标题1</li>
<li>标题2</li>
<li>标题3</li>
</ul>
<i class='link'></i> <!--这是标题下面的滑块-->
</div>
复制代码
css代码如下
body {
background: #666
}
* {
padding: 0
}
ul,
li {
list-style: none;
}
.tabchouse {
width: 540px; /*这里总宽度是写死的方便居中,有需求可以自行修改,是三个li的宽度之和*/
margin: 0 auto;
height: 41px;
position: relative;
}
ul {
font-size: 18px;
width: 100%;
color: #fff;
height: 40px;
position: relative;
}
ul li {
float: left;
width: 180px;
height: 41px;
line-height: 41px;
text-align: center;
cursor: pointer;
}
ul li:hover,
ul li.active {
color: #f39800;
}
.link {
position: absolute;
display: inline-block;
height: 3px;
width: 140px;
bottom: 0px;
left: 20px;
background: #f39800;
}
复制代码
js代码如下
var _left;
$('.tabchouse ul').on('mouseover', 'li', function() {
_left = ($(this).index()) * 180 + 20 + 'px'; //180是li宽度,20是180-link的宽度140再除以2的值
$('.link').animate({
'left': _left
}, 50);
})
$('.tabchouse').on('mouseleave', 'ul', function() {
_left = ($('.tabchouse ul .active').index()) * 180 + 20 + 'px';
$('.link').animate({
'left': _left
}, 50);
})
$('.tabchouse ul').on('click', 'li', function() {
$(this).siblings().removeClass('active');
$(this).addClass('active');
})
复制代码
在线地址
在线地址
这个效果这项目中使用比较百搭,改改样式就能这项目中使用了!