当前位置:
首页 > 技术 > Jquery 通用选项卡点击切换

Jquery 通用选项卡点击切换

TabTit被点击的切换按钮的父级

on是TabTit子级需被选中的样式,在默认处加入on可一开始则加载该处

TabCon被显示的内容

<div id="tabsTit" class="tabsTit">
     <a class="aBtn on">Table</a>
     <a class="aBtn">ImgUrl</a>
     <aclass="aBtn">Context</a>
</div>
<script>
$(function(){ 
     tabsClick('#tabsTit', 'on', '#tabsCon'); 
});
</script>
/**
* 通用选项卡点击切换 - 改进版本
*/
function tabsClick(tabTit,on,tabCon)
{
     var $tabTit = $(tabTit);
     var $ttChild = $tabTit.children();
     var $tcChild = $(tabCon).children();
     $i = $ttChild.hasClass(on) ? $ttChild.parent().find('.'+on).index() : 0;
     $tcChild.eq($i).show();
     $ttChild.eq($i).addClass(on);
     $ttChild.click(function(){
          $(this).addClass(on).siblings().removeClass(on);
          var index = $tabTit.children().index(this);
          $tcChild.eq(index).show().siblings().hide();
     });
}

Jquery 通用选项卡点击切换:等您坐沙发呢!

发表评论

您必须 [ 登录 ] 才能发表留言!