jQuery+CSS写的tab选项卡
先给大家看一下效果图:
html+jQuery代码:
<div class="tab">
<ul class="tab-list">
<li>
<a class="current" href="">tab1选项卡</a>
</li>
<li>
<a href="">tab2选项卡</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-group tab-group-show">
tab1选项卡内容
</div>
<div class="tab-group">
tab2选项卡内容
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function(){
$('.tab-list a').each(function(i){
$(this).click(function(){
$('.tab-list a').removeClass('current').eq(i).addClass('current');
$('.tab-group').hide().eq(i).show();
return false;
})
})
})
</script>
CSS代码:
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #333;
}
.tab {
width: 100%;
}
.tab-list {
display: flex;
border-bottom: 2px solid #ccc;
}
.tab-list li {
flex:1;
text-align: center;
font-size: 1.3rem;
height: 3rem;
line-height: 3rem;
}
.tab-list .current {
color: #ff5400;
font-weight: bold;
border-bottom: 2px solid #ff5400;
display: block;
}
.tab-group {
padding: 40px 20px;
display: none;
}
.tab-group-show {
display: block;
}
注意:css部分代码需要根据需求自己稍微调整,我上面使用的是自适应的rem单位。
版权声明:本文为qq15577969原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。