选项卡 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