打造簡易可擴充的jQuery/CSS3 Tab菜單

標籤：style   blog   class   code   java   tar   

今天我們利用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代碼就可以定製自己喜歡的外觀了。

最後，分享一下原始碼，>>