欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2016年07月28日 09:37:56   作者：Marksinoberg  
這篇文章主要為大家詳細(xì)介紹了jQuery制作網(wǎng)頁(yè)版選項(xiàng)卡的相關(guān)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

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

引入所需庫(kù)

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

選項(xiàng)卡原理

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

 <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)的改變頁(yè)面上的元素，從而實(shí)現(xiàn)我們想要的效果。這也是JQuery的強(qiáng)大之處。

這里比較有技巧性的就是通過(guò)對(duì)ul li樣式的變換，實(shí)現(xiàn)了類(lèi)似于導(dǎo)航欄的效果。我們可以借鑒到今后的開(kāi)發(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)的效果如下：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論