tab选项卡功能很常见,以下列举三种方法来实现tab切换
先贴上HTML源码
<div class="warpbox">
<!--# 选项卡 -->
<div class="table_card">
<ul class="tab">
<li class="activ">最新</li>
<li>热门</li>
<li>新闻</li>
</ul>
<div class="tabCon">
<div class="on">
<ul class="newslist01">
<li><a hrer="#">文章一</a></li>
<li><a hrer="#">文章一</a></li>
<li><a hrer="#">文章一</a></li>
<li><a hrer="#">文章一</a></li>
</ul>
</div>
<div>
<ul class="newslist01">
<li><a hrer="#">文章二</a></li>
<li><a hrer="#">文章二</a></li>
<li><a hrer="#">文章二</a></li>
<li><a hrer="#">文章二</a></li>
</ul>
</div>
<div>
<ul class="newslist01">
<li><a hrer="#">文章三</a></li>
<li><a hrer="#">文章三</a></li>
<li><a hrer="#">文章三</a></li>
<li><a hrer="#">文章三</a></li>
</ul>
</div>
</div>
</div>
<!--#@ 选项卡 -->
</div>
以下是设置浏览器的默认样式
body {
font: 12px/20px Open Sans,微软雅黑, Helvetica, Arial, sans-serif;
background:#F9F9F9;
margin:0;
padding:0;
color:#555555;
min-width:1000px
}
a {
color:#111111;
text-decoration:none;
-webkit-transition:color 0.2s linear;
-moz-transition:color 0.2s linear;
-o-transition:color 0.2s linear;
transition:color 0.2s linear
}
a:focus,a:link,a:active { outline:none}
a:hover { color:#F30}
ol, ul, li{ list-style: none}
*{margin:0;padding:0}
html,body { margin:0; padding:0; height:100%}
以下是tab的样式
.table_card {width:720px; margin:0 auto;margin-top: 20px}
.table_card .tab { height:37px; font-size:14px; border-bottom:1px #e1e1e1 solid}
.table_card .tab li { float:left; height:36px; line-height:36px; padding:0 25px; margin-right:5px; background:#f0f0f0; border-top:1px #e1e1e1 solid; border-left:1px #e1e1e1 solid; border-right:1px #e1e1e1 solid;}
/*.table_card .tab li:hover { height:37px; background:#fff; color:#333; cursor:pointer}*/
.table_card .activ { height:37px !important; background:#fff !important; color:#333}
.table_card .tabCon { background:#fff; padding:15px; border-bottom:1px #e1e1e1 solid; border-left:1px #e1e1e1 solid; border-right:1px #e1e1e1 solid;}
.table_card .tabCon .off { display:none}
.table_card .tabCon .on { display:block}
.table_card .tabCon div{display: none;}
.newslist01 { font-size:14px; }
.newslist01 li { line-height:36px;}
1.jQuery
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$("#tab li").click(function(){
$("#tab li").eq($(this).index()).addClass("activ").siblings().removeClass("activ");
$("#tabCon div").hide().eq($(this).index()).show();
})
});
</script>
2.JavaScript
<script type="text/javascript">
var tabs=document.getElementsByClassName("tab")[0].getElementsByTagName("li");
var divs=document.getElementsByClassName("tabCon")[0].getElementsByTagName("div");
for (var i=0;i<tabs.length;i++) {
tabs[i].onclick=function(){change(this);}
}
function change(obj){
for (var i=0;i<tabs.length;i++) {
if (tabs[i]==obj) {
tabs[i].className="activ";
divs[i].className="on";
}
else{
tabs[i].className="";
divs[i].className="";
}
}
}
</script>
项目开发中发现一种更加好的方法,不需要传参
for(var i=0;i<tabs.length;i++){
tabs[i].index=i;
tabs[i].onclick=function(){
for(var i=0;i<tabs.length;i++){
tabs[i].className='';
divs[i].style.display="none";
}
this.className="activ";
divs[this.index].style.display="block";
}
}
这里要获取当前tab的class,应该是用id获取比较好,因为getElementsByClassName获取到的是一个集合,之前没有注意到这个问题,所以在这里要获取就需要去找getElementsByClassName('tab')[0]
3.这里使用纯css
<div class="main">
<ul class="tabs">
<li>
<input type="radio" checked name="tabs" id="tab1">
<label for="tab1">tab 1</label>
<div id="tab-content1" class="tab-content">
<p>tab 1</p>
</div>
</li>
<li>
<input type="radio" checked name="tabs" id="tab2">
<label for="tab2">tab 2</label>
<div id="tab-content2" class="tab-content">
<p>tab 2</p>
</div>
</li>
<li>
<input type="radio" checked name="tabs" id="tab3">
<label for="tab3">tab 3</label>
<div id="tab-content3" class="tab-content">
<p>tab 3</p>
</div>
</li>
</ul>
</div>
body, html {
height: 100%;
margin: 0;
-webkit-font-smoothing: antialiased;
font-weight: 100;
background: #aadfeb;
text-align: center;
font-family: helvetica;
}
.tabs input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs {
width: 650px;
float: none;
list-style: none;
position: relative;
padding: 0;
margin: 75px auto;
}
.tabs li{
float: left;
}
.tabs label{
display: block;
padding: 10px 20px;
border-radius: 2px 2px 0 0;
color: #08C;
font-size: 24px;
font-weight: normal;
background: rgba(255,255,255,0.2);
cursor: pointer;
position: relative;
top: 3px;
}
.tabs label:hover{
background:rgba(255,255,255,0.2);
top: 0;
}
[id^=tab]:checked + label{
background: #08C;
color:white;
top: 0;
}
[id^=tab]:checked~[id^=tab-content]{
display: block;
}
.tab-content{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 20px;
line-height: 140%;
background: #08C;
color: white;
position: absolute;
left: 0;
box-sizing: border-box;
}