最近学习了jQuery封装函数,就写了用jQuery封装函数实现选项卡的部分功能,接下来一起来了解一下:
首先我们先对选项卡进行页面布局,页面布局要注意标签的嵌套:
HTML部分:
<div class="bigBox">
<ul class="items">
<li style="background:#f40">星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
</ul>
<div class="content">
<div class="box" style="background:red;display:block">Today is Monday</div>
<div class="box" style="background:#f40">Today is Tuesday</div>
<div class="box" style="background:#f30">Today is Wednesday</div>
<div class="box" style="background:#f20">Today is Thursday</div>
<div class="box" style="background:#f10">Today is Friday</div>
</div>
</div>
* 注意:box的背景可以替换
接下来是CSS部分了,将选项卡的外观进行更改样式:
<style type="text/css">
*{
margin:0;
padding:0;
list-style-type: none;
font-size: 12px;
font-family: "微软雅黑";
}
.bigBox{
width:300px;
height:300px;
border: 1px solid #ccc;
margin:0 auto;
}
.items{
width:300px;
height:30px;
border-bottom: 1px solid #ccc;
}
.items li{
float:left;
width:20%;
height:30px;
text-align: center;
line-height: 30px;
cursor:pointer;
}
.content{
width:300px;
height:270px;
}
.box{
width:300px;
height:270px;
text-align: center;
line-height: 270px;
display:none; //将box隐藏
}
</style>
接下来就是JS部分了,在这部分要注意的参数
<script type="text/javascript" src="js/jquery-3.4.0.min.js"></script>
<script type="text/javascript">
$.extend({
tab:function(tabBtn,tabBox){
tabBtn.click(function() { //单击li时,产生事件
var index = $(this).index(); //创建index,用来存放点击li的下标
tabBtn.css({"background":"#fff"}).eq(index).css({"background":"#f40"}); //单击li时,将其他li的背景变成白色,将当前选中的li背景变成#f40
tabBox.hide().eq(index).show(); //单击li时,将其他box隐藏,当前选中的box元素显示
});
}
});
$.tab($(".items>li"),$(".content>.box"));
</script>
上面就是js部分的代码了,这部分要注意:1.将js的插件引入;2.参数调用;
以上就是这个小型demo的代码了,主要用到的知识有:
1. $.extend( ) :扩展jQuery对象本身,用来在jQuery命名空间上增加新函数。
2. $(selsector).css( ) :给所选择的元素添加样式。
3. eq(num) :寻找第num个元素。
4. hide( ) & show( ) : 隐藏&显示元素。