如图像所示:点哪就出现哪一块
适用dom结构:
<div id="aaa"
<ul class="header">
<li></li> //省略,自行插入li
</ul>
<ul class="box">
<li></li> //省略,自行插入li
</ul>
</div
css样式:
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.header {
display: flex;
width: 500px;
}
.header li {
flex: 1;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid black;
}
.box {
position: relative;
}
.box li {
position: absolute;
left: 0;
top: 0;
width: 500px;
height: 200px;
background-color: yellow;
display: none;
}
.header .active {
background-color: red;
}
.box .active {
display: block;
}
js代码:
$.fn.extend({
tabs:function(index){
var oli = this.find(".header li")
var obox = this.find(".box li")
oli.eq(index).addClass("active")
obox.eq(index).addClass("active")
oli.click(function(){
$(this).addClass("active").siblings().removeClass("active")
var index = $(this).index()
obox.removeClass("active").eq(index).addClass("active")
})
}
})