首頁 > 開發者 > JavaScript

jQuery實現Tab菜單滾動切換的方法，jquerytab菜單滾動

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

jQuery實現Tab菜單滾動切換的方法，jquerytab菜單滾動

本文執行個體講述了jQuery實現Tab菜單滾動切換的方法。分享給大家供大家參考。具體如下：

這是一款jQuery實現讓你的Tab菜單滾動的代碼,先運行一下看看效果咋樣?是不是超不錯,讓你的網頁變得靈動起來,不再靜止,學習jquery的朋友也可作為範例來參考吧.

運行效果如下：

線上示範地址如下：

http://demo.jb51.net/js/2015/jquery-tab-menu-cha-style-codes/

具體代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head><title>jQuery 讓你的Tab菜單滾動的代碼</title><script type="text/javascript" src="jquery1.3.2.js"></script><style> body {  font-family:arial;  font-size:12px;  } a {  color:#333;  text-decoration:none;  display:block; } a:hover {  color:#888;  text-decoration:none; } #moving_tab {  overflow:hidden;  width:300px;  position:relative  border:1px solid #ccc;   margin:0 auto; }  #moving_tab .tabs {   position:relative;    height:30px;   padding-top:5px;   cursor:default;  }  #moving_tab .tabs .item {   position:relative;   z-index:10;   float:left;   display:block;   width:150px;   text-align:center;   font-size:14px;   font-weight:700;   }  #moving_tab .tabs .lava {   position:absolute;   top:0; left:0;   z-index:0;     width:150px;   height:30px;   background:#abe3eb;  }  #moving_tab .content {   position:relative;   overflow:hidden;   background:#abe3eb;   border-top:1px solid #d9fafa;  }  #moving_tab .panel {   position:relative;   width:600px;  }  #moving_tab .panel ul {   float:left;   width:300px;   padding:0;   margin:0;   list-style:none;  }   #moving_tab .panel ul li {    padding:5px 0 5px 10px;     border-bottom:1px dotted #fff;   } </style> <script> $(document).ready(function () {  $('.lava').css({left:$('span.item:first').position()['left']});  $('.item').mouseover(function () {   $('.lava').stop().animate({left:$(this).position()['left']}, {duration:200});     $('.panel').stop().animate({left:$(this).position()['left'] * (-2)}, {duration:200});  }); }); </script></head><body><div id="moving_tab"> <div class="tabs">  <div class="lava"></div>  <span class="item">Popular Posts</span>  <span class="item">Recent Posts</span> </div> <div class="content">        <div class="panel">         <ul>    <li><a href='#'>Panel 01 Item 01</a></li>    <li><a href='#'>Panel 01 Item 02</a></li>    <li><a href='#'>Panel 01 Item 03</a></li>    <li><a href='#'>Panel 01 Item 04</a></li>    <li><a href='#'>Panel 01 Item 05</a></li>   </ul>   <ul>    <li><a href='#'>Panel 02 Item 01</a></li>    <li><a href='#'>Panel 02 Item 02</a></li>    <li><a href='#'>Panel 02 Item 03</a></li>    <li><a href='#'>Panel 02 Item 04</a></li>    <li><a href='#'>Panel 02 Item 05</a></li>      </ul>        </div> </div> </div></body></html>

希望本文所述對大家的jQuery程式設計有所協助。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More