采用三种方式实现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;
        }