简易CSS3 Tab菜单切换是一款简易的CSS3 Tab菜单,这款Tab菜单在切换的时候内容块出现飞入飞出的动画效果,尽管看起来非常简单,但是你完全可以在上面定制自己喜欢的Tab菜单。
var TabBlock = {
s: {
animLen: 200
},
init: function() {
TabBlock.bindUIActions();
TabBlock.hideInactive();
},
bindUIActions: function() {
$('.tabBlock-tabs').on('click', '.tabBlock-tab', function(){
TabBlock.switchTab($(this));
});
},
hideInactive: function() {
var $tabBlocks = $('.tabBlock');
$tabBlocks.each(function(i) {
var
$tabBlock = $($tabBlocks[i]),
$panes = $tabBlock.find('.tabBlock-pane'),
$activeTab = $tabBlock.find('.tabBlock-tab.is-active');
$panes.hide();
$($panes[$activeTab.index()]).show();
});
},
switchTab: function($tab) {
var $context = $tab.closest('.tabBlock');
if (!$tab.hasClass('is-active')) {
$tab.siblings().removeClass('is-active');
$tab.addClass('is-active');
TabBlock.showPane($tab.index(), $context);
}
},
showPane: function(i, $context) {
var $panes = $context.find('.tabBlock-pane');
$panes.slideUp(TabBlock.s.animLen);
$($panes[i]).slideDown(TabBlock.s.animLen);
}
};
$(function() {
TabBlock.init();
});