网上很多tab切换的方法,很多比较复杂,我写了一个非常简单实用的。直接上代码。
1690526205750
主要通过display:none,block。以及类选择器来实现。
首先引入jquery
html部分
- tab1
- tab2
- tab3
- tab4
css部分
.table {
display: flex;
}
li {
width: 100px;
text-align: center;
list-style: none;
cursor: pointer;
}
.content {
display: none;
}
.conAvtive {
display: block;
}
.tabActive {
color: #ccb46c;
}
js部分
$(".table li").on("click", function() {
var divs = $(".content")
var lis = $(".table li")
lis.removeClass('tabActive')
$(this).addClass('tabActive')
for (var i = 0; i < lis.length; i ++) {
if (lis[i] == this) {
divs.removeClass('conAvtive')
divs.eq(i).addClass('conAvtive')
}
}
})
整体代码。
.table {
display: flex;
}
li {
width: 100px;
text-align: center;
list-style: none;
cursor: pointer;
}
.content {
display: none;
}
.conAvtive {
display: block;
}
.tabActive {
color: #ccb46c;
}
- tab1
- tab2
- tab3
- tab4
$(".table li").on("click", function() {
var divs = $(".content")
var lis = $(".table li")
lis.removeClass('tabActive')
$(this).addClass('tabActive')
for (var i = 0; i < lis.length; i ++) {
if (lis[i] == this) {
divs.removeClass('conAvtive')
divs.eq(i).addClass('conAvtive')
}
}
})
效果图
参考文章
发表评论