原文:
打造简易可扩展的jQuery/CSS3 Tab菜单
今天我们利用jQuery和CSS3来打造一款简易而且扩展性强的Tab菜单，这款Tab菜单在切换时也有滑块的效果，先来看看效果图：
由与Tab菜单比较假单，你也可以用CSS代码定制你自己需要的外观。
我们可以在这里看到这款Tab菜单的DEMO演示。
看完演示，再来解读一下这款Tab菜单的源代码，主要由CSS代码和jQuery代码两块。
先是上简单的HTML代码：
<figure class="tabBlock"> <ul class="tabBlock-tabs"> <li class="tabBlock-tab is-active">Tab 1</li> <li class="tabBlock-tab">Tab 2</li> </ul> <div class="tabBlock-content"> <div class="tabBlock-pane"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias molestiae atque quis blanditiis eaque maiores ducimus optio neque debitis quos dolorum odit unde quibusdam tenetur quaerat magni eius quod tempore.</p> </div> <div class="tabBlock-pane"> <ul> <li>Lorem ipsum dolor sit amet.</li> <li>Minima mollitia tenetur nesciunt modi?</li> <li>Id sint fugit et sapiente.</li> <li>Nam deleniti libero obcaecati pariatur.</li> <li>Nemo optio iste labore similique?</li> </ul> </div> </div> </figure>
这里我们可以看到，Tab菜单的菜单部分用了一个ul li列表，内容部分是普通的div块。
接下来我们来看看CSS代码：
.unstyledList, .tabBlock-tabs { list-style: none; margin: 0; padding: 0; } .tabBlock { margin: 0 0 2.5rem; } .tabBlock-tab { background-color: white; border-color: #d8d8d8; border-left-style: solid; border-top: solid; border-width: 2px; color: #b5a8c5; cursor: pointer; display: inline-block; font-weight: 600; float: left; padding: 0.625rem 1.25rem; position: relative; -webkit-transition: 0.1s ease-in-out; transition: 0.1s ease-in-out; } .tabBlock-tab:last-of-type { border-right-style: solid; } .tabBlock-tab::before, .tabBlock-tab::after { content: ""; display: block; height: 4px; position: absolute; -webkit-transition: 0.1s ease-in-out; transition: 0.1s ease-in-out; } .tabBlock-tab::before { background-color: #b5a8c5; left: -2px; right: -2px; top: -2px; } .tabBlock-tab::after { background-color: transparent; bottom: -2px; left: 0; right: 0; } @media screen and (min-width: 700px) { .tabBlock-tab { padding-left: 2.5rem; padding-right: 2.5rem; } } .tabBlock-tab.is-active { position: relative; color: #975997; z-index: 1; } .tabBlock-tab.is-active::before { background-color: #975997; } .tabBlock-tab.is-active::after { background-color: white; } .tabBlock-content { background-color: white; border: 2px solid #d8d8d8; padding: 1.25rem; } .tabBlock-pane > :last-child { margin-bottom: 0; }
这里我们清楚地可以看到，大部分CSS代码非常普通，就是定义了Tab菜单的外观。滑块滑入滑出的效果是利用了CSS3的transition: 0.1s ease-in-out;
然后是切换的动作，这里利用了jQuery代码，也非常简单：
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(); });
很清楚的几个js函数，主要是初始化init()和tab切换switchTab()，利用jQuery实现切换其实也是用jQuery动态改变元素的css class来实现的，没有特别的地方，这样js和css就分离开了，我们只需修改css代码就可以定制自己喜欢的外观了。
最后，分享一下源代码，下载地址>>
