bootstrap的标签插件简化版，8-11增加无须使用js，只要在html里面添加data-toggle="tab"即可。
JQuery代码：
(function( $ ) {
$.fn.myTab = function() {
var $this = $(this),
$ul = $this.closest('ul'),
selector = $this.attr('data-target'),
$parent = $this.parent('li'),
$target;
if (!selector) {
selector = $this.attr('href')
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
}
if($this.parent('li').hasClass('active')) return;
$parent.addClass('active').siblings().removeClass('active');
$target = $(selector);
$target.show().siblings().hide();
};
$('[data-toggle="tab"]').click(function(e){
e.preventDefault();
$(this).myTab();
});
})( jQuery );
HTML结构：
<div class="tab">
<ul class="tab-menu" id="J-mytab">
<li class="active"><a href="#tab1" data-toggle="tab">tab1</a></li>
<li><a href="#tab2" data-toggle="tab">tab2</a></li>
</ul>
<div class="tab-con">
<div class="tab-box active" id="tab1">con1</div>
<div class="tab-box" id="tab2">con2</div>
</div>
</div>
CSS代码参考：
.tab-menu li{display: inline-block;}
.tab-menu .active{color:red;}
.tab-con .tab-box{display: none;}
.tab-con .active{display: block;}
如果不在页面使用data-toggle="tab"的方法，则可以使用以下js：
$('#J-mytab a').click(function(event) {
event.preventDefault();
$(this).myTab();
});
本文均为荣益互联摘自权威资料，书籍，文章，或来自网络，如有版权纠纷或违规问题，请联系我们删除。我们欢迎您的分享，谢绝直接抄袭复制。感谢…
