选项卡手写不用插件

来源:互联网 发布:sqlserver 升级 编辑:程序博客网 时间:2024/06/05 08:48

<!--选项卡-->
<div class="Switch">
<p class="Switch_one Switch_hover">TA的被赞</p>
<p class="Switch_two">TA的点赞</p>

</div>


<div class="tab-content">
<div class="tab-pane  active" id="tab1">
 Ta的被赞</div>

          <div class="tab-pane"  id="tab2"> Ta的点赞  </div>

 </div>

      


/*选项卡*/

/*选项卡切换*/
.Switch{width: 1080px;height: 46px;box-sizing: border-box;border-bottom: 1px solid #dadada;margin-top: 14px;}
.Switch p{padding-top: 2px;float: left;color:#999;font-size: 16px;width: 130px;height:43px;line-height: 45px;text-align: center;border-left:1px solid #dadada;border-top:1px solid #dadada;cursor: pointer; }
.Switch_two{border-right: 1px solid #dadada;}
.Switch .Switch_hover{border-top: 3px solid #33b3ee;position: relative;top:0px;background: #fff;padding: 0;color:#333;}






//选项卡切换
$('.Switch p').click(function(){
    $(this).addClass('Switch_hover').siblings().removeClass('Switch_hover');
})
$('.Switch_one').on('click',function(){
    $('#tab1').fadeIn().siblings('#tab2').fadeOut();
});
$('.Switch_two').on('click',function(){
    $('#tab2').fadeIn().siblings('#tab1').fadeOut();
});


原创粉丝点击