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

简易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();});

在线演示        积分下载        6毛下载        砍两刀下载