jQuery制作網頁版選項卡

2019-11-20 09:23:26

字體：大中小

來源：轉載

供稿：網友

網頁選項卡可以較好的利用有限的頁面來展示更多的元素，而使用JQuery來制作網頁選項卡也是一件非常簡單的事情。今天就來分享一個網頁選項卡的制作小技巧。

◦引入所需庫
◦選項卡原理
◦業務核心
◦完整小例子

引入所需庫

這個知識點很基礎，但是為了照顧fresh man ,我還是寫一下吧。

選項卡原理

選項卡出現其實只是某一個div獲取到了顯示的權限，其他的沒有顯示而已。
•網頁代碼

 <div class="tab">  <div class="tab_menu">    <ul>      <li class="selected">選項卡1</li>      <li>選項卡2</li>      <li>選項卡3</li>    </ul>  </div><br><br><br>  <div class="tab_box">    <div>選項卡1:這里是1號內容區域</div>    <div class="hide">選項卡2：這里是2號內容區域</div>    <div class="hide">選項卡3：這里是3號內容區域</div>  </div></div>

•添加點樣式元素

<style>    // 使得UL中的li標簽水平排列    ul {      display:inline;      white-space: nowrap;    }    li {      margin:3px;      float:left;      background:red;      // 這樣可以防止li標簽出現換行的顯示      display:inline-block;    }    .tab_menu {      list-style:none; /* 去掉ul前面的符號 */      margin: 0px; /* 與外界元素的距離為0 */      padding: 0px; /* 與內部元素的距離為0 */      width: auto; /* 寬度根據元素內容調整 */    }    .tab_box {      background-color: #465c71; /* 背景色 */      border: 1px #4e667d solid; /* 邊框 */      color: #dde4ec; /* 文字顏色 */      display: block; /* 此元素將顯示為塊級元素，此元素前后會帶有換行符 */      line-height: 1.35em; /* 行高 */      padding: 4px 20px; /* 內部填充的距離 */      text-decoration: none; /* 不顯示超鏈接下劃線 */      white-space: nowrap; /* 對于文本內的空白處，不會換行，文本會在在同一行上繼續，直到遇到 <br> 標簽為止。 */    }    .selected {      background-color: green;      display: block;    }    .hide {      display: none;    }  </style>

•JQuery控制

 <script>  // 加上鼠標的點擊效果  $(function(){    $("ul li").click(function(){      $(this).addClass("selected").siblings().removeClass("selected");      var index = $("ul li").index(this);      $("div.tab_box > div").eq(index).show().siblings().hide();    })  })  // 加上鼠標懸浮效果  $(function(){    $("div.tab_menu ul li").hover(function(){      $(this).addClass("selected").show();      // 下面的這個可以實現選項卡的聯動效果      var index = $("ul li").index(this);      $("div.tab_box > div").eq(index).show().siblings().hide();    },function(){      $(this).removeClass("selected").show();      // 下面的這個可以實現選項卡的聯動效果      var index = $("ul li").index(this);      $("div.tab_box > div").eq(index).show().siblings().hide();    })  })</script>

業務核心

里面最關鍵的其實還是最為基礎的JQuery選擇器的使用，然后我們就可以動態的改變頁面上的元素，從而實現我們想要的效果。這也是JQuery的強大之處。

這里比較有技巧性的就是通過對ul li樣式的變換，實現了類似于導航欄的效果。我們可以借鑒到今后的開發之中。這是一個非常實用的小技巧。

// 使得UL中的li標簽水平排列    ul {      display:inline;      white-space: nowrap;    }    li {      margin:3px;      float:left;      background:red;      display:inline-block;    }

完整小例子

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Tab Host Demo</title> <script type="text/javascript" src="jquery-2.2.4.min.js"></script> <style>  // 使得UL中的li標簽水平排列  ul {   display:inline;   white-space: nowrap;  }  li {   margin:3px;   float:left;   background:red;   display:inline-block;  }  .tab_menu {   list-style:none; /* 去掉ul前面的符號 */   margin: 0px; /* 與外界元素的距離為0 */   padding: 0px; /* 與內部元素的距離為0 */   width: auto; /* 寬度根據元素內容調整 */  }  .tab_box {   background-color: #465c71; /* 背景色 */   border: 1px #4e667d solid; /* 邊框 */   color: #dde4ec; /* 文字顏色 */   display: block; /* 此元素將顯示為塊級元素，此元素前后會帶有換行符 */   line-height: 1.35em; /* 行高 */   padding: 4px 20px; /* 內部填充的距離 */   text-decoration: none; /* 不顯示超鏈接下劃線 */   white-space: nowrap; /* 對于文本內的空白處，不會換行，文本會在在同一行上繼續，直到遇到 <br> 標簽為止。 */  }  .selected {   background-color: green;   display: block;  }  .hide {   display: none;  } </style></head><body><div class="tab"> <div class="tab_menu">  <ul>   <li class="selected">選項卡1</li>   <li>選項卡2</li>   <li>選項卡3</li>  </ul> </div><br><br><br> <div class="tab_box">  <div>選項卡1:這里是1號內容區域</div>  <div class="hide">選項卡2：這里是2號內容區域</div>  <div class="hide">選項卡3：這里是3號內容區域</div> </div></div><script> // 加上鼠標的點擊效果 $(function(){  $("ul li").click(function(){   $(this).addClass("selected").siblings().removeClass("selected");   var index = $("ul li").index(this);   $("div.tab_box > div").eq(index).show().siblings().hide();  }) }) // 加上鼠標懸浮效果 $(function(){  $("div.tab_menu ul li").hover(function(){   $(this).addClass("selected").show();   // 下面的這個可以實現選項卡的聯動效果   var index = $("ul li").index(this);   $("div.tab_box > div").eq(index).show().siblings().hide();  },function(){   $(this).removeClass("selected").show();   // 下面的這個可以實現選項卡的聯動效果   var index = $("ul li").index(this);   $("div.tab_box > div").eq(index).show().siblings().hide();  }) })</script></body></html>

實現的效果如下：