代码位置：

https://github.com/i5ting/i5ting-jquery-tab

界面如下：

此界面模仿的是 iciba.com 的 tab 样式

特性

• jquery 插件，支持配置
• 显示隐藏按钮，可配置

用法

固定高度显示

$('.wrap1').i5ting_jquery_tab({
    fix_height :'200px'
});

隐藏 tab 正文区域的按钮

$('.wrap2').i5ting_jquery_tab({
    is_tab_content_btn_show:false
});

使用 hover 事件触发

$('.wrap2').i5ting_jquery_tab({
    is_tab_content_btn_show:false,
    current_tab_index: 2, 
    event_trigger_type:'hover'
});

固定高度显示

$('.wrap1').i5ting_jquery_tab({
    fix_height :'200px'
});

隐藏 tab 正文区域的按钮

$('.wrap2').i5ting_jquery_tab({
    is_tab_content_btn_show:false
});

配置项说明

• 是否固定显示高度

fix_height :'200px'

如果配置了 fix_height 属性，则 tab 将以此高度，固定显示高度。

默认是自动适应高度的。

• 是否显示 tab 正文区域是否隐藏按钮

is_tab_content_btn_show :fase

如果配置了 is_tab_content_btn_show=false 属性，则 tab 不显示隐藏 tab 正文区域的按钮。

默认：is_tab_content_btn_show=true

• 增加 event_trigger_type

/*现在支持 2 种类型：click | hover */

• 设置 current_tab_index（说明：此设置是把 tab_content 设置为对应选中，不修改 li 的原因是，不预制 li class=current 会导致进入刷新，会闪屏幕的）

<div class='i5ting_tab_list'> 
     <ul>
         <li >
            <a href="#">tab说明</a>   
         </li>
         <li>
            <a href="#">特性</a>
         </li>
         <li class="current">
            <a href="#">开源协议</a>
         </li>
         <li>
            <a href="#">源码</a>
         </li>
         <li>
            <a href="#">张婷作品</a>
         </li>
     </ul>
</div>

Release History

(Nothing yet)

v0.1 source

• 是否固定显示高度
• 是否显示 tab 正文区域是否隐藏按钮
• 给最后一个 li 增加 last 这个 css 样式
• 增加 event_trigger_type:'click', /*现在支持 2 种类型：click | hover */
• 设置 current_tab_index（说明：此设置是把 tab_content 设置为对应选中，不修改 li 的原因是，不预制 li class=current 会导致进入刷新，会闪屏幕的）

欢迎批评反馈