网站上tab嵌套tab的双重Tab该怎么写

问：老师，我现在有一个客户找我做一个网站，网站上要用到tab嵌套tab，就是那种双重Tab的效果，该怎么写这样的功能呢？

答：tab嵌套tab在有些网站里比较常用，可以有效的节约网站版面，制作tab嵌套tab可以使用我们课程里讲的TAB方法来制作。效果如下：

方法/步骤

1. 下载双重TAB需要的jquery特效基础包。点击下载 提取码: cme9；
2. 将下载的压缩包解压出来，将里面的jquery1.42.min.js和jquery.SuperSlide.2.1.3.js二个文件通过FTP工具上传到自己模板的images文件夹里；
   

   

3. 在头部模板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>
   
   

4. 在需要显示双重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>
   
   

5. 在网页的最底部放上以下的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>
   
   

6. 最放在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; }
   

7. 这样就可以制作出tab嵌套tab的双重Tab功能了。