jquery编写的选项卡案例
实现功能:
选项卡能够根据你所选择的选项切换到对应的选项内容
1、CSS样式
<style>
/*设置整个字体为微软雅黑,字体大小为16*/
body{
font:16px "Microsoft YaHei",sans-serif;
}
/*设置ul的属性*/
ul{
list-style-type:none;
margin:0;
padding:0;
}
/*设置选项卡的整体布局*/
.container{
margin:100px auto;
width:800px;
}
/*设置选项卡列表*/
.option-list{
height:40px;
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
}
/*设置选项卡列表下的选项*/
.option-list li{
float:left;
padding:0px 20px;
height:39px; /*因为选项卡列表有41px,为了选项底部线显示所以设置为39px*/
line-height:40px;
border-top:1px solid #ccc;
border-right:1px solid #ccc;
background-color:#f5f5f5;
cursor:pointer;
}
/*设置选项卡列表下的第一个选项为显示状态*/
.option-list li.current{
height:40px;
background-color:#fff;
}
/*设置选项卡列表下的内容*/
.card-list li{
display:none; /*内容隐藏*/
padding:20px;
height:300px;
border:1px solid #ccc;
border-top:none;
}
/*设置选项卡列表下的第一个内容为显示状态*/
.card-list li.current{
display:block; /*内容显示*/
}
</style>
2、body样式
<!--选项卡的整体布局-->
<div class="container">
<!--选项卡列表-->
<div class="option-list">
<ul>
<li class="current">选项卡一</li>
<li>选项卡二</li>
<li>选项卡三</li>
<li>选项卡四</li>
<li>选项卡五</li>
</ul>
</div>
<!--选项卡内容-->
<div class="card-list">
<ul>
<li class="current">这是选项卡一的内容</li>
<li>这是选项卡二的内容</li>
<li>这是选项卡三的内容</li>
<li>这是选项卡四的内容</li>
<li>这是选项卡五的内容</li>
</ul>
</div>
</div>
3、jquery代码
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){
$(".option-list li").click(function(){
//自由切换选项卡下的选项
$(this).addClass("current").siblings("li").removeClass("current");
//对选项卡下的所有内容都隐藏,然后通过选择选项的获取的索引添加属性类
$(".card-list li").removeClass("current").eq($(this).index()).addClass("current");
});
});
</script>
-
选项卡原图效果
-
选项卡自由切换效果