这是一款jQuery响应式Tabs选项卡插件。该tabs选项卡插件兼容ie8，当浏览器缩小到小于选项卡的宽度时，选项卡的菜单会以下拉菜单的方式来显示。

使用方法

在页面中引入jquery和jquery.horizontalmenu.js、jquery.horizontalmenu.css文件。

HTML

Tabs选项卡的基本HTML结构如下。

  

    菜单项1
    菜单项2
    菜单项3
    菜单项4
    菜单项5
  


  

    
Personal data
  
  

    
Contacts
  
  

    
Tab item with a long name
  
  

    
Password change
  
  

    
Tab item
  

                

初始化插件

在页面DOM元素加载完毕之后，通过下面的方法来使选项卡自适应屏幕宽度，在屏幕宽度小于选项卡宽度时，显示为下拉菜单。

$(function () {
  $('.ah-tab-wrapper').horizontalmenu({
    itemClick : function(item) {
      $('.ah-tab-content-wrapper .ah-tab-content').removeAttr('data-ah-tab-active');
      $('.ah-tab-content-wrapper .ah-tab-content:eq(' + $(item).index() + ')').attr('data-ah-tab-active', 'true');
      return false; //if this finction return true then will be executed http request
    }
  });
});
                

jQuery响应式Tabs选项卡插件的github地址为：https://github.com/romannovojilov/adaptive-horizontal-menu