JS实现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来修改滚动的一次性滚动个数及长度。