网站上tab嵌套tab的双重Tab该怎么写
问：老师，我现在有一个客户找我做一个网站，网站上要用到tab嵌套tab，就是那种双重Tab的效果，该怎么写这样的功能呢？
答：tab嵌套tab在有些网站里比较常用，可以有效的节约网站版面，制作tab嵌套tab可以使用我们课程里讲的TAB方法来制作。效果如下：
方法/步骤
- 下载双重TAB需要的网站特效功能万能JS插件包；
- 将下载的压缩包解压出来，将里面的jquery1.42.min.js和jquery.SuperSlide.2.1.3.js二个文件通过FTP工具上传到自己模板的images文件夹里；
- 在头部模板header.php里找到</head> 标签，将下的代码放到</head> 标签上面；（注意文件路径）
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/static/js/jquery1.42.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/static/js/jquery.SuperSlide.2.1.3.js"></script> - 在需要显示双重TAB的位置，放上以下的HTML代码：
<div class="outBox" style="margin:0 auto">
<div class="hd">
<ul><li>教育</li><li>培训</li><li>出国</li></ul>
</div>
<div class="bd"><!-- inBox S -->
<div class="inBox">
<div class="inHd">
<ul><li>栏目一</li><li>栏目二</li><li>栏目三</li></ul>
</div>
<div class="inBd">
<ul>
子栏目一
</ul>
<ul>
子栏目二
</ul>
<ul>
子栏目三
</ul>
</div>
</div>
<!-- inBox S -->
<div class="inBox">
<div class="inHd">
<ul><li>栏目三</li><li>栏目四</li><li>栏目五</li></ul>
</div>
<div class="inBd">
<ul>
子栏目三
</ul>
<ul>
子栏目四
</ul>
<ul>
子栏目五
</ul>
</div>
</div>
<!-- inBox S -->
<div class="inBox">
<div class="inHd">
<ul><li>栏目六</li><li>栏目七</li><li>栏目八</li></ul>
</div>
<div class="inBd">
<ul>
子栏目六
</ul>
<ul>
子栏目七
</ul>
<ul>
子栏目八
</ul>
</div>
</div>
</div><!-- bd E -->
</div> - 在网页的最底部放上以下的JS代码，实现TAB切换：
<script type="text/javascript">
/*
SuperSlide组合注意：
1、内外层mainCell、targetCell、prevCell、nextCell等对象不能相同，除非特殊应用；
2、注意书写顺序，通常先写内层js调用，再写外层js调用
*//* 内层inBox渐显切换，注意titCell、mainCell等不能与外层相同 */
jQuery(".inBox").slide({ titCell:".inHd li",mainCell:".inBd" });
/* 外层outBox左滚动切换 */
jQuery(".outBox").slide({ effect:"left" });
</script> - 最放在CSS文件里放上以下的CSS样式代码，用于控制双重TAB的样式。
.outBox{ width:450px; border:1px solid #ddd; text-align:left; }
.outBox .hd{ height:30px; line-height:30px; background:#f4f4f4; padding:0 20px; border-bottom:1px solid #ddd; position:relative; }
.outBox .hd ul{ float:left; position:absolute; left:20px; top:-1px; height:32px; }
.outBox .hd ul li{ float:left; padding:0 15px; cursor:pointer; }
.outBox .hd ul li.on{ height:30px; background:#fff; border:1px solid #ddd; border-bottom:2px solid #fff; }.inBox{ padding:15px 15px 0 15px; }
.inBox .inHd{ height:24px; line-height:24px; border-bottom:1px solid #ccc; padding:0 10px; }
.inBox .inHd ul{ overflow:hidden; zoom:1; }
.inBox .inHd ul li{ height:24px; width:60px; text-align:center; float:left; cursor:pointer; }
.inBox .inHd ul li.on{ background:#ccc; color:#fff; }
.inBox .inBd ul{ padding:15px; zoom:1; overflow:hidden; }
.inBox .inBd li{ height:24px; line-height:24px; overflow:hidden; zoom:1; }
.inBox .inBd li .date{ float:right; color:#999; } - 这样就可以制作出tab嵌套tab的双重Tab功能了。
