4种超酷Tabs选项卡设计效果 |选项卡|下载

简要教程

这是一组非常实用的Tabs选项卡设计效果。这组选项卡同4之后效果，分别为基本选项卡，彩色带图标的选项卡，下划线样式选项卡和垂直选项卡。这些选项卡样式简洁大方，兼容IE8，非常实用。

使用方法

每一个选项卡都对应一个单独的样式文件，需要那种类型的选项卡就引入对应的CSS文件。另外特效中使用jQuery来控制用户和选项卡的交互动作。

HTML结构

这些选项卡的HTML结构基本类似：使用一个

作为容器，选项卡的分页使用无序列表来制作，内容页则使用嵌套的

元素来制作。


  <-- 分页标签 -->
  
      
          First tab
      
      
          Second tab
      
      
          Third tab
      
  
  
  

      
          ......
          
      

      
          ......
          
      

      
          ......

JavaScript

这些Tabs选项卡使用jQuery来完成用户的交互动作，实现方法非常简单，只是在用户点击相应的Tabs分页时为内容页添加和移除相应的class。

$(document).ready(function() {

    var widget = $('.tabs-basic');

    var tabs = widget.find('ul a'),
        content = widget.find('.tabs-content-placeholder > div');

    tabs.on('click', function (e) {
        e.preventDefault();
        var index = $(this).data('index');

        tabs.removeClass('tab-active');
        content.removeClass('tab-content-active');

        $(this).addClass('tab-active');
        content.eq(index).addClass('tab-content-active');

    });

});