使用jquery怎么切換選項卡

這篇文章將為大家詳細講解有關使用jquery怎么切換選項卡，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

創(chuàng)新互聯(lián)專注于冊亨企業(yè)網(wǎng)站建設,自適應網(wǎng)站建設,商城網(wǎng)站制作。冊亨網(wǎng)站建設公司,為冊亨等地區(qū)提供建站服務。全流程按需設計網(wǎng)站，專業(yè)設計，全程項目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務

jquery是什么

jquery是一個簡潔而快速的JavaScript庫，它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件，是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發(fā)網(wǎng)站。

主要邏輯就在于找到選項卡和內容框相對應的下標。

<html>
<head>
<meta charset="UTF-8">
<title>選項卡</title>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
</head>
<style>
.tab{width:400px;height:400px;border:1px solid red;}
.tab-menu{height:100px;width:400px;border:1px solid grey;}
.tab-menu ul{list-style:none;}
.tab-menu li{display:block;width:30%;float:left;border:1px solid blue;}
.tab-box div{width:400px;height:300px;border:1px solid #ff4200;display:none;}
/* 讓第一個框顯示出來 */
.tab-box div:first-Child{display:block;} 
/* 改變選項卡選中時候的樣式 */
.change{background:red;} 
</style>
<script>
$().ready(function(){
  $(".tab-menu li").mouseover(function(){
  //通過 .index()方法獲取元素下標，從0開始，賦值給某個變量
    var _index = $(this).index();
  //讓內容框的第 _index 個顯示出來，其他的被隱藏
    $(".tab-box>div").eq(_index).show().siblings().hide();
  //改變選中時候的選項框的樣式，移除其他幾個選項的樣式
  $(this).addClass("change").siblings().removeClass("change");
  });
});
</script>
<body>
  <div class="tab">
    <div class="tab-menu">
      <ul>
        <li>新服</li>
        <li>爆服</li>
        <li>大服</li>
      </ul>
    </div>
    <div class="tab-box">
      <div>123</div>
      <div>456</div>
      <div>789</div>
    </div>
  </div>
</body>
</html>

關于使用jquery怎么切換選項卡就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

分享標題：使用jquery怎么切換選項卡
瀏覽地址：http://muchs.cn/article24/ghjece.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、域名注冊、搜索引擎優(yōu)化、手機網(wǎng)站建設、商城網(wǎng)站、營銷型網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站托管運營