微客导航 » 文章资讯 » 使用jQuery实现简单的tab框实例

使用jQuery实现简单的tab框实例

2023-09-26 02:11:06 302

html代码






实现简单的tab框






休闲装
名媛
运动服


女装男装童装
甜美风文艺风
运动男运动女

css代码

*{
margin:0;
padding:0px;
}
ul{
width:300px;
margin:10pxauto;
}
ulli{
list-style:none;
}
.mainli{
text-align:center;
float:left;
padding:5px;
margin-left:10px;
width:80px;
cursor:pointer;
background-color:#f3f2e7;
}
.main.style1{
width:50px;
font-weight:bold;
background-color:#f3f2e7;
border:1pxsolid#837979;
border-bottom:0;
z-index:100;
position:relative;
}
.sublevel{
width:260px;
height:80px;
padding:19px;
background-color:#f3f2e7;
clear:left;
border:1pxsolid#837979;
position:relative;
top:-1px;
}
.sublevelli{
display:none;
}
.sublevel.style1{
display:block;
}

jquery代码

$(function(){
//页面打开时呈现的效果
$(".sublevelli:eq(0)").show();
//each遍历输出
$(".mainli").each(function(index){
//click点击
$(this).click(function(){
//addClass()增加当前样式removeClass()移除除当前点击之外的同级样式
$(this).addClass("mainstyle1").siblings().removeClass("style1");
$(".sublevelli:eq("+index+")").show().siblings().hide();
})
})
})

以上这篇使用jQuery实现简单的tab框实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

使用jQuery实现简单的tab框实例

热门推荐

随机推荐