溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

jQuery實現(xiàn)標簽頁效果實戰(zhàn)（4）

發(fā)布時間：2020-10-19 05:26:48 來源：腳本之家 閱讀：239 作者：少年張翠山 欄目：web開發(fā)

今天我們來完成《jQuery實戰(zhàn)》系列的標簽頁效果。先來看一看效果圖

jQuery實現(xiàn)標簽頁效果實戰(zhàn)（4）

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

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

<body> 
  <ul id="tabfirst">
    <li class="tabin">標簽1</li>
    <li>標簽2</li>
    <li>標簽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>

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

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

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

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

<%@ 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實戰(zhàn):tab頁簽</title>
</head>
<body> 
  <ul id="tabfirst">
    <li class="tabin">標簽1</li>
    <li>標簽2</li>
    <li>標簽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">裝入完整頁面</li>
    <li>裝入部分頁面</li>
    <li>從遠程獲取數(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頁面模塊的js代碼
 */

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

  //在整個頁面裝入完成后，標簽效果2的內(nèi)容區(qū)域需要裝入靜態(tài)的html頁面內(nèi)容
  $("#realcontent").load("../jsp/tabLoad.html");
  //找到標簽2效果對應(yīng)的三個標簽，注冊鼠標點擊事件
  $("#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 h3");
      } else if(2 == index) {
        $("#realcontent").load("/JqueryStudy/tabServlet");
      }
    });
  });

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

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持億速云。

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

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手