<!-- ************* HTML ************* -->

<div id="tabNav">

    <span class="active" data-class="plaInt">平台简介</span>

    <span data-class="comPro">公司简介</span>

    <span data-class="costPro">平台费用</span>

</div>

<div class="clear bordertblr mb30" id="tabCont">

    <!-- 平台简介 -->

    <div class="plaInt"></div>

    <!-- 公司简介 -->

    <div class="comPro"></div>

    <!-- 平台费用 -->

    <div class="costPro"></div>

</div>

<!-- ************* CSS ************* -->

#tabNav span {float:left;cursor:pointer;display:inline-block;padding:5px 14px;color:rgb(28,127,219);background-color:#F6F6F6;font-size:15px;}

#tabNav span.active {background-color:rgb(28,127,219);color:white;}

.comPro,

.costPro {display:none;}

// ************* JQ *************

$("#tabNav span").on(‘click‘,function(){

    var data = http://www.mamicode.com/$(this).attr("data-class");

    $(this).addClass("active").siblings().removeClass("active");

    $("#tabCont ."+data).show().siblings().hide();

})

本文出自 “江边的山茶” 博客，请务必保留此出处http://shancha.blog.51cto.com/5215524/1602442

tab-选项卡-[data-class]