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

点击切换

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

鼠标滑动切换

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

HTML代码

  1. <div id="tab_demo" class="HuiTab">
  2. <div class="tabBar clearfix"><span>选项卡一</span><span>选项卡二</span><span>自适应宽度</span></div>
  3. <div class="tabCon">内容一</div>
  4. <div class="tabCon">内容二</div>
  5. <div class="tabCon">内容三</div>
  6. </div>

CSS代码

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

JS代码

引入jQuery

  1. <script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
  1. jQuery.Huitab =function(tabBar,tabCon,class_name,tabEvent,i){
  2. var $tab_menu=$(tabBar);
  3. // 初始化操作
  4. $tab_menu.removeClass(class_name);
  5. $(tabBar).eq(i).addClass(class_name);
  6. $(tabCon).hide();
  7. $(tabCon).eq(i).show();
  8. $tab_menu.bind(tabEvent,function(){
  9. $tab_menu.removeClass(class_name);
  10. $(this).addClass(class_name);
  11. var index=$tab_menu.index(this);
  12. $(tabCon).hide();
  13. $(tabCon).eq(index).show()})}

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

调用代码:

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

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

Copyright ©2013-2022 H-ui.net All Rights Reserved.
豫ICP备19019279号-1
H-ui只是一个纯web前端的程序,没有后台和数据库,也不提供任何系统代运营服务。所有使用H-ui开发的任何系统版权都归开发者所有,造成的任何损失、不良影响,H-ui均不承担任何法律责任。
未经允许,禁止转载、抄袭、镜像
用心做站,做不一样的站