本文实例为大家分享了Jquery实现滑动tab选项卡的具体代码，供大家参考，具体内容如下 先上最终效果: 需求分析: 1.选项卡菜单数量不固定，菜单内容不固定，导致了单个菜单和整体
本文实例为大家分享了Jquery实现滑动tab选项卡的具体代码，供大家参考，具体内容如下
先上最终效果:
1.选项卡菜单数量不固定，菜单内容不固定，导致了单个菜单和整体的宽度都是未知的，
2.第一个需求导致滑块宽度也是不固定的
3.为了让交互效果更好，滑块需要添加过度动画
对滑块的需求导致滑块和菜单的html结构必须分离，并使用了jQuery的offset方法获取并设置位置，所有的div都使用了相对定位。
本案例的TAB选项卡可以比较方便的拓展、重复使用，只需修改少量值就可以直接食用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>0908</title>
<script src="Http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<style>
.container{
left: 50%;
margin-top: 100px;
float: left;
cursor:pointer;
position: relative;
}
.BG{
right: 50%;
font-size: 0;
background-color: #f2f2f2;
border-radius: 30px;
position: relative;
}
.container div{
font-size: 16px;
line-height: 60px;
}
.list{
float: left;
display: inline-block;
padding: 0 50px;
transition: color 0.5s;
position: relative;
z-index: 1;
}
.listH{
color: #ff8300;
}
.listA{
color: #fff;
}
#active{
width: 100px;
height: 60px;
border-radius: 30px;
background-color: #ff8300;
box-shadow: 0 5px 16px 0 rgba(255, 144, 0, 0.58);
position: relative;
z-index: 0;
transition: left 0.5s,width 1s;
}
</style>
<script>
$(document).ready(function () {
var aL = $(".list:eq(1)");
$("#active").width(aL.innerWidth());
$("#active").offset(aL.offset());
aL.addClass("listA");
$(".list").click(function() {
$("#active").width($(this).innerWidth()); //设置宽度
$("#active").offset($(this).offset()); //设置位置
$(this).addClass("listA");
$(".list").not(this).removeClass("listA");
});
$(".list").hover(function () {
$(this).addClass("listH")
},function () {
$(this).removeClass("listH")
})
});
</script>
</head>
<body>
<div class="container">
<div class="BG">
<div class="list">one</div>
<div class="list">twotwo</div>
<div class="list">threethreethree</div>
<div class="list">four</div>
<div class="list">fivefivefive</div>
<div id="active"></div>
</div>
</div>
</body>
</html>--结束END--
本文标题: jQuery实现滑动tab选项卡
本文链接: https://lsjlt.com/news/131953.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0