选项卡
文章转载,请注明出处 H-ui前端框架,网址http://www.h-ui.net/
点击切换
选项卡一选项卡二自适应宽度
内容一
内容二
内容三
鼠标滑动切换
选项卡一选项卡二自适应宽度
内容一
内容二
内容三
HTML
SCSS
CSS
JS
<div id="tab_demo" class="hui-tab"> <div class="hui-tab-header clearfix"><span role="tab">选项卡一</span><span role="tab">选项卡二</span><span role="tab">自适应宽度</span></div> <div class="hui-tab-content pd-10">内容一</div> <div class="hui-tab-content pd-10">内容二</div> <div class="hui-tab-content pd-10">内容三</div> </div>
.hui-tab { .hui-tab-header { border-bottom: 1px solid #e8e8e8; span { cursor: pointer; display: inline-block; height: 40px; line-height: 40px; padding: 0 20px; border-bottom: solid 2px #fff; &.current { border-bottom-color: #1890ff; } } } .hui-tab-content { display: none; padding-top: 20px; } }
.hui-tab .hui-tab-header { border-bottom: 1px solid #e8e8e8; } .hui-tab .hui-tab-header span { cursor: pointer; display: inline-block; height: 40px; line-height: 40px; padding: 0 20px; border-bottom: solid 2px #fff; } .hui-tab .hui-tab-header span.current { border-bottom-color: #1890ff; } .hui-tab .hui-tab-content { display: none; padding-top: 20px; }
$("#tab_demo").Huitab(); $("#tab_demo2").Huitab({ tabEvent:"mousemove", index:0 });
相关参数
属性 | 默认值 | 描述 | 备注 |
---|---|---|---|
tabBar | '.tabBar span' | 触发区域 | |
tabCon | ".tabCon" | 主体区域 | |
className | "current" | 切换时追加的样式 | |
tabEvent | "click" | 触发事件 | 可以换成mousemove |
index | 0 | 默认第一个为打开 | 默认当前状态索引(从0开始) |