今天我们利用jQuery和CSS3来打造一款简易而且扩展性强的Tab菜单，这款Tab菜单在切换时也有滑块的效果，先来看看效果图：

由与Tab菜单比较假单，你也可以用CSS代码定制你自己需要的外观。

我们可以在这里看到。

看完演示，再来解读一下这款Tab菜单的源代码，主要由CSS代码和jQuery代码两块。

先是上简单的HTML代码：

     
  
      
    
       
Tab 1
    
       
Tab 2
  
      
  
      
    
       
      
        
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.
    
       
    
       
      
        
        
         
Lorem ipsum dolor sit amet.
        
         
Minima mollitia tenetur nesciunt modi?
        
         
Id sint fugit et sapiente.
        
         
Nam deleniti libero obcaecati pariatur.
        
         
Nemo optio iste labore similique?
      
        
    
       
  
      
     

这里我们可以看到，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代码就可以定制自己喜欢的外观了。

最后，分享一下源代码，