跨浏览器响应式Tabs选项卡jQuery插件使用攻略

1、使用该幻灯片插件需要引入jQuery（1.5.1+），responsive-tabs.css和easyResponsiveTabs.js文件。<link rel="stylesheet" href="css/responsive-tabs.css" type="text/css"><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/easyResponsiveTabs.js"></script>

3、嵌套选项卡的HTML结构如下：<div id="ParentTab"> <ul class="resp-tabs-list tab_identifier_parent"> <li> .... </li> <li> .... </li> <li> .... </li> </ul> <div class="resp-tabs-container tab_identifier_parent"> <div> <p> <div id="ChildTab"> <ul class="resp-tabs-list tab_identifier_child"> <li> .... </li> <li> .... </li> <li> .... </li> </ul> <div class="resp-tabs-container tab_identifier_child"> <div> ....... </div> <div> ....... </div> <div> ....... </div> </div> </div> </p> </div> <div> ....... </div> <div> ....... </div> </div></div>

5、下面是该Tabs选项卡的一些可用配置参数：type：选项卡的类型。可用的类型有：default, vertical, accordion。默认值：default。width：选项卡的宽度。默认值：'auto'fit：是否100%适配容器。默认值：true。closed：在开始时关闭所有面板。默认值：false。activate：切换Tab时的回调函数。tabidentify：Tab组的名称标识符，必须是唯一的。默认值：'tab_identifier_child'。activetab_bg：在某一组中激活的选项卡的背景色。默认值：'#B5AC5F'。inactive_bg：在某一组中闲置的选项卡的背景色。默认值：'#E0D78C'。active_border_color：在某一组中激活的选项卡头部边框的颜色。默认值：'#9C905C'。active_content_border_color：在某一组中激活的选项卡内容区域边框的颜色。默认值：'#9C905C'。

10、Vertical Tab with (Nested Tabs)运行效果如下图所示：