选项卡 3.1版本之后请到这个地方查看文档

HTML代码

<div id="tab_demo" class="HuiTab">
  <div class="tabBar clearfix"><span>选项卡一</span><span>选项卡二</span><span>自适应宽度</span></div>
  <div class="tabCon">内容一</div>
  <div class="tabCon">内容二</div>
  <div class="tabCon">内容三</div>
</div>

CSS代码

.clearfix:after{content:"\20";display:block;height:0;clear:both;visibility:hidden}.clearfix{zoom:1}
.tabBar {border-bottom: 2px solid #222}
.tabBar span {background-color: #e8e8e8;cursor: pointer;display: inline-block;float: left;font-weight: bold;height: 30px;line-height: 30px;padding: 0 15px}
.tabBar span.current{background-color: #222;color: #fff}
.tabCon {display: none}

JS代码

引入jQuery

<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 

jQuery.Huitab =function(tabBar,tabCon,class_name,tabEvent,i){
var $tab_menu=$(tabBar);
  // 初始化操作
  $tab_menu.removeClass(class_name);
  $(tabBar).eq(i).addClass(class_name);
  $(tabCon).hide();
  $(tabCon).eq(i).show();
  
  $tab_menu.bind(tabEvent,function(){
  	$tab_menu.removeClass(class_name);
      $(this).addClass(class_name);
      var index=$tab_menu.index(this);
      $(tabCon).hide();
      $(tabCon).eq(index).show()})}

注意： 如果页面中引用了h-ui.js，无需重复粘贴上面脚本代码。

调用代码：

$(function(){
$.Huitab("#tab_demo .tabBar span","#tab_demo .tabCon","current","click","1")});
// #tab_demo 父级id
// #tab_demo .tabBar span 控制条
// #tab_demo .tabCon 内容区
// click 事件 点击切换，可以换成mousemove 移动鼠标切换
// 1	默认第2个tab为当前状态（从0开始）

只要id不重复，同一个页面可以插入多个tab