快捷導(dǎo)航

jQuery實(shí)現(xiàn)標(biāo)簽頁(yè)效果實(shí)戰(zhàn)（4）

更新時(shí)間：2017年02月08日 10:52:17 作者：少年張翠山

這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)標(biāo)簽頁(yè)效果的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

今天我們來(lái)完成《jQuery實(shí)戰(zhàn)》系列的標(biāo)簽頁(yè)效果。先來(lái)看一看效果圖

這里有兩部分的內(nèi)容，上面是一個(gè)標(biāo)簽頁(yè)的效果，下面也是一個(gè)標(biāo)簽頁(yè)的效果。在實(shí)際應(yīng)用中也經(jīng)常會(huì)見到標(biāo)簽頁(yè)的效果，它的作用主要是在頁(yè)面可視區(qū)有限的情況下展示更多的內(nèi)容。當(dāng)用戶想看其他內(nèi)容的時(shí)候不需要離開頁(yè)面，只需要把鼠標(biāo)移動(dòng)到某一個(gè)標(biāo)簽上就可以看到這個(gè)標(biāo)簽里面所對(duì)應(yīng)的內(nèi)容。門戶網(wǎng)站的首頁(yè)，有很多頻道都是標(biāo)簽頁(yè)的最佳案例，如體育、財(cái)經(jīng)、軍事等模塊都是位于不同的標(biāo)簽上。上邊的標(biāo)簽頁(yè)一般稱為滑動(dòng)門技術(shù)，下面的內(nèi)容是一次性加載進(jìn)來(lái)，鼠標(biāo)移動(dòng)到某個(gè)標(biāo)簽之后，下面的內(nèi)容就跟著顯示對(duì)應(yīng)的內(nèi)容，不需要加載頁(yè)面。而下面的標(biāo)簽頁(yè)選用另一種寫法，這是通過(guò)其他頁(yè)面load進(jìn)來(lái)的，當(dāng)你滑動(dòng)到某個(gè)標(biāo)簽的時(shí)候，加載對(duì)應(yīng)的頁(yè)面。

好了，開始編寫我們的代碼，首先是編寫html頁(yè)面”tab.jsp”。

<body> 
  <ul id="tabfirst">
    <li class="tabin">標(biāo)簽1</li>
    <li>標(biāo)簽2</li>
    <li>標(biāo)簽3</li>
  </ul>
  <div class="contentin contentfirst">我是內(nèi)容1</div>
  <div class="contentfirst">我是內(nèi)容2</div>
  <div class="contentfirst">我是內(nèi)容3</div>  
</body>

一般標(biāo)簽我們都用ul和li來(lái)表示，每個(gè)li代表一個(gè)標(biāo)簽，里面有三個(gè)li,分別是標(biāo)簽1，標(biāo)簽2，標(biāo)簽3，下面內(nèi)容區(qū)域是3個(gè)div,這三個(gè)div是預(yù)先裝載進(jìn)來(lái)的。這時(shí)候的基本骨架已經(jīng)完成，接下來(lái)編寫css代碼。
第一步把ul里面的li改造為標(biāo)簽的效果?；貞浬瞎?jié)的課程，li默認(rèn)是縱向的效果，我們想把它變成橫向用清楚li的特征，然后讓其float漂移達(dá)到相應(yīng)的效果。

$(document).ready(function() {
  $("#tabfirst li").mouseover(function() {
    //1.將原來(lái)深顏色的li去掉
    $(".tabin").removeClass("tabin");
    //2.將原來(lái)顯示的div隱藏
    $(".contentin").removeClass("contentin");
    //3.計(jì)算鼠標(biāo)點(diǎn)中哪一個(gè)li
    var chooseStr = $(this).html();
    var index = 0;
    if("標(biāo)簽1" == chooseStr) {
      index = 0;
    } else if("標(biāo)簽2" == chooseStr) {
      index = 1;
    } else if("標(biāo)簽3" == chooseStr) {
      index = 2;
    }
    //4.將對(duì)應(yīng)的div顯示和對(duì)應(yīng)的li加深
    $("#tabfirst li:eq("+index+")").addClass("tabin");
    $("div.contentfirst:eq("+index+")").addClass("contentin");
  });
});

這里的mouseover()函數(shù)的含義是當(dāng)鼠標(biāo)進(jìn)入li時(shí)執(zhí)行函數(shù)里面的代碼。函數(shù)里面的代碼先將原來(lái)深顏色的li去掉，然后將原來(lái)顯示的div隱藏，計(jì)算鼠標(biāo)點(diǎn)中哪一個(gè)li賦值在index變量中，最后對(duì)應(yīng)的div顯示和對(duì)應(yīng)的li加深和將對(duì)應(yīng)的div顯示。

下面的標(biāo)簽頁(yè)思路一樣，真?zhèn)€完整的html頁(yè)面如下:

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="../css/tab.css" rel="external nofollow" />
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/tab.js"></script>
<title>jQuery實(shí)戰(zhàn):tab頁(yè)簽</title>
</head>
<body> 
  <ul id="tabfirst">
    <li class="tabin">標(biāo)簽1</li>
    <li>標(biāo)簽2</li>
    <li>標(biāo)簽3</li>
  </ul>
  <div class="contentin contentfirst">我是內(nèi)容1</div>
  <div class="contentfirst">我是內(nèi)容2</div>
  <div class="contentfirst">我是內(nèi)容3</div>
  <br />
  <br />
  <br />
  <ul id="tabsecond">
    <li class="tabin">裝入完整頁(yè)面</li>
    <li>裝入部分頁(yè)面</li>
    <li>從遠(yuǎn)程獲取數(shù)據(jù)</li>
  </ul>
  <div id="contentsecond">
    <img alt="裝載中" src="../image/img-loading.gif" />
    <div id="realcontent"></div>
  </div>
</body>
</html>

css文件如下:

ul,li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#tabfirst li {
  float: left;
  background-color: #868686;
  color: white;
  padding: 5px;
  margin-right: 2px;
  border: 1px solid white;
}
#tabfirst li.tabin {
  background-color: #6E6E6E;
  border: 1px solid #6E6E6E;
}
div.contentfirst {
  clear: left;
  background-color: #6E6E6E;
  color: white;
  width: 300px;
  height: 100px;
  padding: 10px;
  display: none;
}
div.contentin {
  display: block;
}

#tabsecond li {
  float: left;
  background-color: white;
  color: blue;
  padding: 5px;
  margin-right: 2px;
  cursor: pointer;
}
#tabsecond li.tabin {
  background-color: #F2F6FB;
  border: 1px solid black;
  border-bottom: 0;
  z-index: 100;
  position: relative;
}
#contentsecond {
  width: 500px;
  height: 200px;
  padding: 10px;
  background-color: #F2F6FB;
  clear: left;
  border: 1px solid black;
  position: relative;
  top: -1px;
}
img {
  display: none;
}

jQuery代碼如下:

/**
 * tab頁(yè)面模塊的js代碼
 */

$(document).ready(function() {
  $("#tabfirst li").each(function(index){
    //每一個(gè)包裝li的jquery對(duì)象都會(huì)執(zhí)行function中的代碼
    //index是當(dāng)前執(zhí)行這個(gè)function代碼的li對(duì)應(yīng)在所有l(wèi)i組成的數(shù)組中的索引值
    //有了index的值之后，就可以找到當(dāng)前標(biāo)簽對(duì)應(yīng)的內(nèi)容區(qū)域
    $(this).mouseover(function(){ 
      var liNode = $(this);
      timoutid = setTimeout(function(){
        //將原來(lái)顯示的內(nèi)容區(qū)域進(jìn)行隱藏
        $("div.contentin").removeClass("contentin");
        //對(duì)有tabin的class定義的li清除tabin的class
        $("#tabfirst li.tabin").removeClass("tabin");
        //當(dāng)前標(biāo)簽所對(duì)應(yīng)的內(nèi)容區(qū)域顯示出來(lái)
        //$("div").eq(index).addClass("contentin");
        $("div.contentfirst:eq(" + index + ")").addClass("contentin");
        liNode.addClass("tabin");  
      },300);     
    }).mouseout(function(){
      clearTimeout(timoutid); 
    });
  });

  //在整個(gè)頁(yè)面裝入完成后，標(biāo)簽效果2的內(nèi)容區(qū)域需要裝入靜態(tài)的html頁(yè)面內(nèi)容
  $("#realcontent").load("../jsp/tabLoad.html");
  //找到標(biāo)簽2效果對(duì)應(yīng)的三個(gè)標(biāo)簽，注冊(cè)鼠標(biāo)點(diǎn)擊事件
  $("#tabsecond li").each(function(index){
    $(this).click(function(){
      $("#tabsecond .tabin").removeClass("tabin");
      $(this).addClass("tabin");

      if(0 == index) {
        $("#realcontent").load("../jsp/tabLoad.html");
      } else if(1 == index) {
        $("#realcontent").load("../jsp/tabLoad1.html h2");
      } else if(2 == index) {
        $("#realcontent").load("/JqueryStudy/tabServlet");
      }
    });
  });

  //對(duì)于loading圖片綁定ajax請(qǐng)求開始和交互結(jié)束的事件
  $("#contentsecond img").bind("ajaxStart",function(){
    $("#realcontent").html("");
    $(this).show();
  }).bind("ajaxStop", function(){
    $(this).slideUp("1000");
  });
});

代碼參考地址：https://github.com/shizongger/JqueryInAction

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

參考資料：
1. 王興奎《jQuery實(shí)戰(zhàn)》
2. w3school

您可能感興趣的文章: