选项卡

点击切换

选项卡一选项卡二自适应宽度
内容一
内容二
内容三

鼠标滑动切换

选项卡一选项卡二自适应宽度
内容一
内容二
内容三

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