首页 > 其他 > 详细

tab-选项卡-[data-class]

时间:2015-01-12 16:51:02      阅读:236      评论:0      收藏:0      [点我收藏+]

<!-- ************* 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 = $(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]

原文:http://shancha.blog.51cto.com/5215524/1602442

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!