打造简易可扩展的jQuery/CSS3 Tab菜单

原文:打造简易可扩展的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代码就可以定制自己喜欢的外观了。

最后，分享一下源代码，下载地址>>