我們?cè)趯W(xué)習(xí)網(wǎng)站制作過程，發(fā)現(xiàn)很多網(wǎng)站都采用tab切換菜單來顯示不同欄目的內(nèi)容，這樣即可以節(jié)省網(wǎng)站版面，也可以更多的顯示網(wǎng)站的欄目?jī)?nèi)容。如何在自己做的網(wǎng)站中制作出tab切換菜單呢，這也并非什么難事。

下面學(xué)做網(wǎng)站論壇講一下如何制作Tab菜單滾動(dòng)切換的效果，如下圖：

tab切換效果菜單效果圖

網(wǎng)站制作tab切換效果菜單方法

• 在自己網(wǎng)站需要顯示切換菜單的位置，粘貼以下的代碼。（調(diào)用文章的分類ID號(hào)要修改成自己網(wǎng)站的分類ID號(hào)，適用于wordpress網(wǎng)站）
  <div class="tab_box">
  <div class="lyz_tab_left">
  <div class="pro_con111">
  <ul>
  <li class="hover" id="one1" onclick="setTab('one',1,5)">學(xué)校掠影</li>
  <li id="one2" onclick="setTab('one',2,5)">教師風(fēng)采</li>
  <li id="one3" onclick="setTab('one',3,5)">學(xué)生風(fēng)采</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>
• 在網(wǎng)站的頭部文件header.php中的</head>上方添加以下三句JS代碼，作用是用來讓菜單內(nèi)容滾動(dòng)起來。
• 下載JS文件,解壓后上傳到自己網(wǎng)站的主題文件夾下。下載地址：http://pan.baidu.com/s/1bnzsRaZ
• 將以下的CSS代碼復(fù)制粘貼到自己網(wǎng)站的CSS文件中。
  /*滾動(dòng)*/
  .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;
  }
• 完成以上步驟之后就可以實(shí)現(xiàn)tab切換菜單帶內(nèi)容向左滾動(dòng)的效果了。當(dāng)然不同的網(wǎng)站的樣式及要求的效果不一樣，可以通過修改CSS樣式及修改JS中的jcarousellite.js來修改滾動(dòng)的一次性滾動(dòng)個(gè)數(shù)及長(zhǎng)度。

標(biāo)簽： isp 代碼 網(wǎng)站制作

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。