【js】采用三种方式实现tab切换

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