jQuery响应式Tabs选项卡插件

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

使用方法

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

<link href="css/jquery.horizontalmenu.css" rel="stylesheet"> 
<script type="text/javascript" src="js/jquery.min.js"></script>             
<script type="text/javascript" src="js/jquery.horizontalmenu.js"></script>                  
                

HTML

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

<div class="ah-tab-wrapper">
  <div class="ah-tab">
    <a class="ah-tab-item" data-ah-tab-active="true" href="">菜单项1</a>
    <a class="ah-tab-item" href="">菜单项2</a>
    <a class="ah-tab-item" href="">菜单项3</a>
    <a class="ah-tab-item" href="">菜单项4</a>
    <a class="ah-tab-item" href="">菜单项5</a>
  </div>
</div>
<div class="ah-tab-content-wrapper">
  <div class="ah-tab-content" data-ah-tab-active="true">
    <h2>Personal data</h2>
  </div>
  <div class="ah-tab-content">
    <h2>Contacts</h2>
  </div>
  <div class="ah-tab-content">
    <h2>Tab item with a long name</h2>
  </div>
  <div class="ah-tab-content">
    <h2>Password change</h2>
  </div>
  <div class="ah-tab-content">
    <h2>Tab item</h2>
  </div>
</div>
                

初始化插件

在页面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