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; }
