快捷導(dǎo)航

jQuery制作網(wǎng)頁版選項(xiàng)卡

更新時(shí)間：2016年07月28日 09:37:56 作者：Marksinoberg

這篇文章主要為大家詳細(xì)介紹了jQuery制作網(wǎng)頁版選項(xiàng)卡的相關(guān)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

◦引入所需庫
◦選項(xiàng)卡原理
◦業(yè)務(wù)核心
◦完整小例子

引入所需庫

這個(gè)知識(shí)點(diǎn)很基礎(chǔ)，但是為了照顧fresh man ,我還是寫一下吧。

選項(xiàng)卡原理

選項(xiàng)卡出現(xiàn)其實(shí)只是某一個(gè)div獲取到了顯示的權(quán)限，其他的沒有顯示而已。
•網(wǎng)頁代碼

 <div class="tab">
  <div class="tab_menu">
    <ul>
      <li class="selected">選項(xiàng)卡1</li>
      <li>選項(xiàng)卡2</li>
      <li>選項(xiàng)卡3</li>
    </ul>
  </div><br><br><br>
  <div class="tab_box">
    <div>選項(xiàng)卡1:這里是1號(hào)內(nèi)容區(qū)域</div>
    <div class="hide">選項(xiàng)卡2：這里是2號(hào)內(nèi)容區(qū)域</div>
    <div class="hide">選項(xiàng)卡3：這里是3號(hào)內(nèi)容區(qū)域</div>
  </div>
</div>

•添加點(diǎn)樣式元素

<style>

    // 使得UL中的li標(biāo)簽水平排列
    ul {
      display:inline;
      white-space: nowrap;
    }
    li {
      margin:3px;
      float:left;
      background:red;
      // 這樣可以防止li標(biāo)簽出現(xiàn)換行的顯示
      display:inline-block;
    }

    .tab_menu {
      list-style:none; /* 去掉ul前面的符號(hào) */
      margin: 0px; /* 與外界元素的距離為0 */
      padding: 0px; /* 與內(nèi)部元素的距離為0 */
      width: auto; /* 寬度根據(jù)元素內(nèi)容調(diào)整 */
    }
    .tab_box {
      background-color: #465c71; /* 背景色 */
      border: 1px #4e667d solid; /* 邊框 */
      color: #dde4ec; /* 文字顏色 */
      display: block; /* 此元素將顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符 */
      line-height: 1.35em; /* 行高 */
      padding: 4px 20px; /* 內(nèi)部填充的距離 */
      text-decoration: none; /* 不顯示超鏈接下劃線 */
      white-space: nowrap; /* 對(duì)于文本內(nèi)的空白處，不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到 <br> 標(biāo)簽為止。 */
    }
    .selected {
      background-color: green;
      display: block;
    }
    .hide {
      display: none;
    }
  </style>

•JQuery控制

 <script>
  // 加上鼠標(biāo)的點(diǎn)擊效果
  $(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();
    })
  })

  // 加上鼠標(biāo)懸浮效果
  $(function(){
    $("div.tab_menu ul li").hover(function(){
      $(this).addClass("selected").show();
      // 下面的這個(gè)可以實(shí)現(xiàn)選項(xiàng)卡的聯(lián)動(dòng)效果
      var index = $("ul li").index(this);
      $("div.tab_box > div").eq(index).show().siblings().hide();
    },function(){
      $(this).removeClass("selected").show();
      // 下面的這個(gè)可以實(shí)現(xiàn)選項(xiàng)卡的聯(lián)動(dòng)效果
      var index = $("ul li").index(this);
      $("div.tab_box > div").eq(index).show().siblings().hide();
    })
  })
</script>

業(yè)務(wù)核心

里面最關(guān)鍵的其實(shí)還是最為基礎(chǔ)的JQuery選擇器的使用，然后我們就可以動(dòng)態(tài)的改變頁面上的元素，從而實(shí)現(xiàn)我們想要的效果。這也是JQuery的強(qiáng)大之處。

這里比較有技巧性的就是通過對(duì)ul li樣式的變換，實(shí)現(xiàn)了類似于導(dǎo)航欄的效果。我們可以借鑒到今后的開發(fā)之中。這是一個(gè)非常實(shí)用的小技巧。

// 使得UL中的li標(biāo)簽水平排列
    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標(biāo)簽水平排列
  ul {
   display:inline;
   white-space: nowrap;
  }
  li {
   margin:3px;
   float:left;
   background:red;
   display:inline-block;
  }

  .tab_menu {
   list-style:none; /* 去掉ul前面的符號(hào) */
   margin: 0px; /* 與外界元素的距離為0 */
   padding: 0px; /* 與內(nèi)部元素的距離為0 */
   width: auto; /* 寬度根據(jù)元素內(nèi)容調(diào)整 */
  }
  .tab_box {
   background-color: #465c71; /* 背景色 */
   border: 1px #4e667d solid; /* 邊框 */
   color: #dde4ec; /* 文字顏色 */
   display: block; /* 此元素將顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符 */
   line-height: 1.35em; /* 行高 */
   padding: 4px 20px; /* 內(nèi)部填充的距離 */
   text-decoration: none; /* 不顯示超鏈接下劃線 */
   white-space: nowrap; /* 對(duì)于文本內(nèi)的空白處，不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到 <br> 標(biāo)簽為止。 */
  }
  .selected {
   background-color: green;
   display: block;
  }
  .hide {
   display: none;
  }
 </style>
</head>
<body>
<div class="tab">
 <div class="tab_menu">
  <ul>
   <li class="selected">選項(xiàng)卡1</li>
   <li>選項(xiàng)卡2</li>
   <li>選項(xiàng)卡3</li>
  </ul>
 </div><br><br><br>
 <div class="tab_box">
  <div>選項(xiàng)卡1:這里是1號(hào)內(nèi)容區(qū)域</div>
  <div class="hide">選項(xiàng)卡2：這里是2號(hào)內(nèi)容區(qū)域</div>
  <div class="hide">選項(xiàng)卡3：這里是3號(hào)內(nèi)容區(qū)域</div>
 </div>
</div>
<script>
 // 加上鼠標(biāo)的點(diǎn)擊效果
 $(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();
  })
 })

 // 加上鼠標(biāo)懸浮效果
 $(function(){
  $("div.tab_menu ul li").hover(function(){
   $(this).addClass("selected").show();
   // 下面的這個(gè)可以實(shí)現(xiàn)選項(xiàng)卡的聯(lián)動(dòng)效果
   var index = $("ul li").index(this);
   $("div.tab_box > div").eq(index).show().siblings().hide();
  },function(){
   $(this).removeClass("selected").show();
   // 下面的這個(gè)可以實(shí)現(xiàn)選項(xiàng)卡的聯(lián)動(dòng)效果
   var index = $("ul li").index(this);
   $("div.tab_box > div").eq(index).show().siblings().hide();
  })
 })
</script>
</body>
</html>

實(shí)現(xiàn)的效果如下：