简易CSS3 Tab菜单选项卡切换特效

简易CSS3 Tab菜单选项卡切换特效1040
简易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();});

也许你还喜欢