零基础学做网站培训介绍

当前位置:

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

问:老师,我现在有一个客户找我做一个网站,网站上要用到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功能了。

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 通过网页制作教程上节课怎样在网页中添加表格,我们就可以在网页中插入一个表格,但往往插入的表格并不美观,我们需要设置一些表格参数去达到我们要求
  • 我们在学习网站制作过程,发现很多网站都采用tab切换菜单来显示不同栏目的内容,这样即可以节省网站版面,也可以更多的显示网站的栏目内容。如何在自
  • 在做网站时,可以使用TAB菜单来展示很多版块的内容,当光标移向某一个选项时,就会显示相应的内容,再移到另一个栏目时就显示另一个版块的内容,这样
  • 问:老师,我现在有一个客户找我做一个网站,网站上要用到tab嵌套tab,就是那种双重Tab的效果,该怎么写这样的功能呢?答:tab嵌套tab在有些网站里