前端开发设计_jQuery滑动tab选项卡

前端开发选项卡设计|前端开发者|jquery前端开发工程师 会的
需求分析:

1.选项卡菜单数量不固定,菜单内容不固定,导致了单个菜单和整体的宽度都是未知的,
2.第一个需求导致滑块宽度也是不固定的
3.为了让交互效果更好,滑块需要添加过度动画

对滑块的需求导致滑块和菜单的html结构必须分离,并使用了jquery的offset方法获取并设置位置,所有的div都使用了相对定位。
本案例的TAB选项卡可以比较方便的拓展、重复使用,只需修改少量值就可以直接食用

不足之处欢迎指正

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
<metacharset=”UTF-8″>
<title>jquery前端开发工程师 会的</title>
<script src=”http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js”></script>
<style>
/*container容器只是为了水平居中,如不需要可以去掉这层嵌套*/
.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;
}
.containerdiv{
font-size:16px;
line-height:60px;
}
.list{
float:left;
display:inline-block;
padding:050px;
transition:color0.5s;
position:relative;
z-index:1;
}
/*这里的listH和listA顺序不能换,有优先级,当listA被使用时listH不起作用*/
.listH{
color:#ff8300;
}
.listA{
color:#fff;
}
/*滑块*/
#active{
width:100px;
height:60px;
border-radius:30px;
background-color:#ff8300;
box-shadow:05px16px0rgba(255,144,0,0.58);
position:relative;
z-index:0;
transition:left0.5s, width 1s;
}
</style>
<script>
$(document).ready(function(){
/*设置默认激活的选项卡eq(i)*/
varaL=$(“.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”);
});
/*hover效果*/
$(“.list”).hover(function(){
$(this).addClass(“listH”)
},function(){
$(this).removeClass(“listH”)
})
});
</script>
</head>
<body>
<divclass=”container”>
<divclass=”BG”>
<divclass=”list”>one</div>
<divclass=”list”>twotwo</div>
<divclass=”list”>threethreethree</div>
<divclass=”list”>four</div>
<divclass=”list”>fivefivefive</div>
<divid=”active”></div>
</div>
</div>
</body>
</html>

网站前端开发

https://www.rokub.com

» 本文来自:前端开发者 » 《前端开发设计_jQuery滑动tab选项卡》
» 本文链接地址:https://www.rokub.com/2861.html
» 您也可以订阅本站:https://www.rokub.com
赞(1)
64K

评论 抢沙发

评论前必须登录!