本文介绍了一个简单的HTML+CSS+JS实现的标签页切换效果。通过jQuery简化DOM操作，实现选项卡点击时的内容切换，并保持样式一致性。
**
代码简洁，一看就懂
**
**
html
**
<div class="tab-wrap" id="J_tab">
<ul class="tab-list">
<li class="tab-item cur">选项1</li>
<li class="tab-item">选项2</li>
<li class="tab-item">选项3</li>
<li class="tab-item">选项4</li>
<li class="tab-item">选项5</li>
</ul>
<div class="tab-content">
<div class="info active">内容1</div>
<div class="info">内容2</div>
<div class="info">内容3</div>
<div class="info">内容4</div>
<div class="info">内容5</div>
</div>
</div>
**
css
**
body {
margin:0;
}
ul,li {
margin:0;
padding:0;
list-style:none;
}
.tab-wrap {
width:750px;
margin:50px auto;
text-align:center;
}
.tab-list {
width:100%;
}
.tab-list::after {
content:'';
display:block;
clear:both;
}
.tab-item {
float:left;
width:150px;
height:45px;
text-align:center;
line-height:45px;
box-sizing:border-box;
font-size:16px;
border-top:1px solid #333;
border-bottom:1px solid #333;
border-left:1px solid #333;
cursor:pointer;
}
.tab-item.cur {
color:#fff;
background-color:#333;
}
.tab-item:last-child {
border-right:1px solid #333;
}
.tab-content {
position:relative;
}
.tab-content .info {
display:none;
position:absolute;
top:0;
left:0;
width:100%;
height:500px;
border:1px solid #333;
border-top:0;
font-size:30px;
text-align:center;
line-height:500px;
box-sizing:border-box;
}
.tab-content .info.active {
display:block;
}
**
js（代码简洁，一看就懂）
**
(function($) {
var Tab = function(opt) {
this.oTab = opt.oTab;
this.oTabList = opt.oTabList;
this.oTabItem = opt.oTabItem;
this.oTabContentInfo = opt.oTabContentInfo;
}
$.extend(Tab.prototype, {
init: function() {
this.bindEvent();
},
bindEvent: function() {
this.oTabList.on('click', this.oTabItem, $.proxy(this.tabSlide, this))
},
tabSlide: function(e) {
var e = e || window.event,
tar = e.target || e.srcElement,
curIdx = $(tar).index();
//等同于 Array.prototype.indexOf.call(tar.parentNode.children, tar)
if (tar.className == 'tab-item') {
$(tar).addClass('cur').siblings('.tab-item').removeClass('cur');
this._pageSlide(curIdx)
}
},
_pageSlide: function(idx) {
this.oTabContentInfo.eq(idx).addClass('active').siblings().removeClass('active')
}
})
window.Tab = Tab;
})(jQuery);
new Tab({
oTab: $('#J_tab'),
oTabList: $('.tab-list'),
oTabItem: $('.tab-item'),
oTabContentInfo: $('.info')
}).init()
**
效果
**
**
保持结构相同，结构中的类名，可以随意更改，以参数传入即可
**
扫一扫