零基础学做网站培训介绍

当前位置:

JS实现Tab菜单滚动切换的方法

我们在学习网站制作过程,发现很多网站都采用tab切换菜单来显示不同栏目的内容,这样即可以节省网站版面,也可以更多的显示网站的栏目内容。如何在自己做的网站中制作出tab切换菜单呢,这也并非什么难事。

下面学做网站论坛讲一下如何制作Tab菜单滚动切换的效果,如下图:

tab切换变换效果菜单效果图
tab切换效果菜单效果图

网站制作tab切换效果菜单方法

  • 在自己网站需要显示切换菜单的位置,粘贴以下的代码。(调用文章的分类ID号要修改成自己网站的分类ID号,适用于wordpress网站)
    <div class="tab_box">
    <div class="lyz_tab_left">
    <div class="pro_con111">
    <ul>
    <li class="hover" id="one1" onclick="setTab('one',1,5)">学校掠影</li>
    <li id="one2" onclick="setTab('one',2,5)">教师风采</li>
    <li id="one3" onclick="setTab('one',3,5)">学生风采</li>
    </ul>
    </div>
    <script type="text/javascript" language="javascript">// <![CDATA[
    <!–
    function setTab(name,cursel,n){
    for(i=1;i<=n;i++){ var menu=document.getElementById(name+i); var con=document.getElementById("con_"+name+"_"+i); menu.className=i==cursel?"hover":""; con.style.display=i==cursel?"block":"none"; } } //–>
    // ]]></script></div>
    <div class="lyz_tab_right">
    <div class="hover" id="con_one_1">
    <div class="carousel">
    <div class="jCarouselLite" id="demo-02"><!--?php endwhile;?-->
    <!--?php endif; wp_reset_query(); ?--></div>
    <div class="clear"></div>
    </div>

    <script type="text/javascript">// <![CDATA[
    $(document).ready(function(){ $(‘#demo-02′).jCarouselLite({ btnPrev: ‘#prev-02′, btnNext: ‘#next-02′, auto: 800, speed: 2000 }); });
    // ]]></script>

    </div>
    <div class="hover" id="con_one_2">
    <div class="carousel">
    <div class="jCarouselLite" id="demo-03">

    <!--?php endwhile;?-->
    <!--?php endif; wp_reset_query(); ?-->

    </div>
    <div class="clear"></div>
    </div>
    <!–-carousel end–->
    <script type="text/javascript">// <![CDATA[
    $(document).ready(function(){ $(‘#demo-03′).jCarouselLite({ btnPrev: ‘#prev-03′, btnNext: ‘#next-03′, auto: 800, speed: 2000 }); });
    // ]]></script>

    </div>
    <div class="hover" id="con_one_3">
    <div class="carousel">
    <div class="jCarouselLite" id="demo-04">

    <!--?php endwhile;?-->
    <!--?php endif; wp_reset_query(); ?-->

    </div>
    <div class="clear"></div>
    </div>

    <script type="text/javascript">// <![CDATA[
    $(document).ready(function(){ $(‘#demo-04′).jCarouselLite({ btnPrev: ‘#prev-04′, btnNext: ‘#next-04′, auto: 800, speed: 2000 }); });
    // ]]></script>

    </div>
    </div>
    <div class="clear"></div>
    </div>
  • 在网站的头部文件header.php中的</head>上方添加以下三句JS代码,作用是用来让菜单内容滚动起来。
  • 下载JS文件,解压后上传到自己网站的主题文件夹下。下载地址:https://pan.baidu.com/s/1bnzsRaZ
  • 将以下的CSS代码复制粘贴到自己网站的CSS文件中。
    /*滚动*/
    .carousel {width:980px; margin:0px;}
    .carousel .prev , .carousel .next {height:23px;width:23px;overflow:hidden;display:block;margin-top:40px;text-decoration:none;cursor:pointer;}
    .carousel .prev {float:left;background:url(images/imageNavLeft.gif) no-repeat;}
    .carousel .next {float:left;background:url(images/imageNavRight.gif) no-repeat;}
    .carousel #prev-03.disabled{background:url(images/imageNavLeft-disabled.gif) no-repeat;cursor:default;}
    .carousel #next-03.disabled{background:url(images/imageNavRight-disabled.gif) no-repeat;cursor:default;}
    .jCarouselLite {float:left;width:980px !important;height:152px;overflow:hidden;/*必要元素*/}
    .jCarouselLite li{height:152px;width:170px !important;text-align:center;}
    .jCarouselLite li p{display:block;margin-left:14px;}
    .jCarouselLite li img,.jCarouselLite-01 li img{border:solid 1px #ddd;}
    .carousel-01 {width:152px;margin:30px auto;}
    .carousel-01 .prev , .carousel-01 .next {height:23px;width:23px;overflow:hidden;display:block;margin-left:60px;text-decoration:none;cursor:pointer;}
    .carousel-01 .prev {background:url(images/imageNavLeft.gif) no-repeat;}
    .carousel-01 .next {background:url(images/imageNavRight.gif) no-repeat;}
    .jCarouselLite-01 {height:385px;width:152px;overflow:hidden;/*必要元素*/}
    .jCarouselLite-01 li{height:152px;width:152px;text-align:center;padding:5px 0;}
    /*TAB换片CSS*/
    .tab_box{ width:100%; }
    .lyz_tab_left{ float: left; width: 120px; height: auto !important; min-height:140px; }
    .pro_con1111{ float: left; overflow: hidden; width: 120px; height: auto;}
    .pro_con111 UL{ padding: 0px; width: 120px; list-style-type: none;}
    .pro_con111 UL LI{ display: inline; font-weight: bold; font-size: 14px; background: url(images/hongbj.jpg) no-repeat left center; float: left; margin-bottom: 15px; width: 120px; cursor: pointer; color: #fff; line-height: 34px; height: 34px; text-align: center;}
    .pro_con111 UL LI.hover{ display: inline; font-weight: bold; font-size: 14px; background: url(images/baibj.jpg) no-repeat left center; float: left; margin-bottom: 15px; width: 120px; cursor: pointer; color: #3c3c3c; line-height: 34px; height: 34px; text-align: center;}
    .lyz_tab_right{display: inline; padding-left: 20px; float: left; width: 870px; height:140px;}
    .clear{ clear:both}
    .lyz_tab_right li{ float: left; height: 140px; width: 140px; margin-right:5px;}
    .lyz_tab_right li p{
    display:block;
    width: 140px;
    text-align:center;
    margin-top:10px;
    height:25px;
    line-height:25px;
    text-align:center;
    border: 1px solid #999;
    }
  • 完成以上步骤之后就可以实现tab切换菜单带内容向左滚动的效果了。当然不同的网站的样式及要求的效果不一样,可以通过修改CSS样式及修改JS中的jcarousellite.js来修改滚动的一次性滚动个数及长度。

相关阅读:

DEDECMS后台开发:修改织梦后台左侧菜单类别与名称

Bootstrap 滚动监听实现方法(附实例代码)

解决Discuz点击diy没反应及TAB切换无反应的问题

发表评论

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

相关教程

  • 如果我们的网站有港澳台的用户,那么网站特别好是能支持文字简繁互转,这样做能方便不同用户更好的阅读网站内容。那么如何在自己做网站时,实
  • 我们都知道在做网站时,加载的文件越少速度就会越快,包括CSS、JS、图片、数据库等等,特别是门户网站建设更是如此。要减少这些文件的载入,特别
  • 通过网页制作教程上节课怎样在网页中添加表格,我们就可以在网页中插入一个表格,但往往插入的表格并不美观,我们需要设置一些表格参数去达到我们要求
  • 我们在学习网站制作过程,发现很多网站都采用tab切换菜单来显示不同栏目的内容,这样即可以节省网站版面,也可以更多的显示网站的栏目内容。如何在自
  • Dreamweaver跳转菜单制作 视频教程 (1120006 次浏览)
    什么是跳转菜单跳转菜单是文档内的弹出菜单,对站点访问者可见,并列出链接到文档或文件的选项。可以创建到整个 Web 站点内文档的链接、到其它 Web
  • 在学做网站论坛的VIP课程中,我们讲了做网站时,我们网站的导航是调用一级分类和页面,可往往为了一些需要,登录制作wordpress下拉菜单,要求调用某个
  • 很多企业网站的首页都会做一种动态滚动展示企业产品的效果,是企业网站建设常用的方法。既展示了企业的产品,又让整个网站动静结合,不再毫无生气。
  • 可以说任意一个网站都少不了换灯片,在之前的课程里学做网站论坛也列举了很多网站幻灯片代码,通过这些方法,我们可以制作作某一个规定尺寸的换灯片,