按照慣例，我們還是先來看一下最終要達到效果圖：
和上一個菜單效果類似，當鼠標移動到標簽上的時候，下面會顯示相應的內容。當然，同樣存在滑動門的問題。
前臺頁面的代碼：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="tab.aspx.cs" Inherits="tab" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="css/tab.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="js/tab.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <div id="firstDiv"> <ul> <li class="tabin">標簽一</li> <li>標簽二</li> <li>標簽三</li> </ul> <div class="contentin"> 我是標簽一的內容</div> <div> 我是標簽二的內容</div> <div> 我是標簽三的內容</div> </div> </form> </body> </html>
tab.css
ul,li { list-style:none; margin:0; padding:0; } li { background-color:#6E6E6E; float:left; color:White; padding:5px; margin-right:3px; border: 1px solid white; } .tabin { border:1px solid #6E6E6E; } #firstDiv div { clear:left; background-color:#6E6E6E; width:200px; height:100px; display:none; } #firstDiv .contentin { display:block; } tab.js
/// <reference path="jquery-1.9.1.min.js" /> $(document).ready(function () { var setTimeouId; $("#firstDiv li").each(function (index) { $(this).mouseover(function () { var nodeTabin = $(this); setTimeouId = setTimeout(function () { $("#firstDiv .contentin").removeClass("contentin"); $("#firstDiv .tabin").removeClass("tabin"); $("#firstDiv div").eq(index).addClass("contentin"); //我在這里犯錯了哦，不應該再用this this如果用在這里的話那么是指的window nodeTabin.addClass("tabin"); }, 300); }).mouseout(function () { clearTimeout(setTimeouId); }); }); }); 我們最終實現的效果如圖所示：
當單擊標簽一的時候，下面加載的是一個html的全部內容；當單擊標簽二的時候，下面加載的是一個asp.net頁面的一部分內容，標簽三未添加效果。
頁面前臺的代碼如圖：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="tab.aspx.cs" Inherits="tab" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="css/tab.css" rel="stylesheet" type="text/css" /> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/tab.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <div id="firstDiv"> <ul> <li class="tabin">標簽一</li> <li>標簽二</li> <li>標簽三</li> </ul> <div class="contentin"> 我是標簽一的內容</div> <div> 我是標簽二的內容</div> <div> 我是標簽三的內容</div> </div> <br /> <br /> <br /> <div id="secondDiv"> <ul> <li class="tabin">標簽一</li> <li>標簽二</li> <li>標簽三</li> </ul> <div id="secondContentin"> <img alt="裝載中" src="images/img-loading.gif" /> <div id="realContentin"></div> </div> </div> </form> </body> </html>
tab.css
ul,li { list-style:none; margin:0; padding:0; } #firstDiv li { background-color:#6E6E6E; float:left; color:White; padding:5px; margin-right:3px; border: 1px solid white; } #firstDiv .tabin { border:1px solid #6E6E6E; } #firstDiv div { clear:left; background-color:#6E6E6E; width:200px; height:100px; display:none; } #firstDiv .contentin { display:block; } #secondDiv li { float:left; color:Blue; background-color:White; padding:5px; margin-right:3px; /*當鼠標放在標簽上時，顯示成小手*/ cursor:pointer; } #secondDiv li.tabin { background-color:#F2F6F8; border:1px solid black; border-bottom:0; /*只有position設置成relative或者absolute的時候z-index才有效*/ position:relative; z-index:100; } #secondContentin { width:300px; height:200px; padding:10px; background-color:#F2F6F8; clear:left; border:1px solid black; /*下面是讓底下的內容向上移動一個像素 *但是，我們可以看到，并沒有達到我們想要的效果，接下 *來要上上面的li顯示層次在最上面，這樣就蓋住了下面的div的border */ position:relative; top:-1px; } /*開始的時候讓loading圖片隱藏*/ img { display:none; } 關于z-index的問題，注釋上有說明，下面的截圖是我截的js手冊上的內容：
tab.js
/// <reference path="jquery.js" /> $(document).ready(function () { var setTimeouId; $("#firstDiv li").each(function (index) { $(this).mouseover(function () { var nodeTabin = $(this); setTimeouId = setTimeout(function () { $("#firstDiv .contentin").removeClass("contentin"); $("#firstDiv .tabin").removeClass("tabin"); $("#firstDiv div").eq(index).addClass("contentin"); //我在這里犯錯了哦，不應該再用this this如果用在這里的話那么是指的window nodeTabin.addClass("tabin"); }, 300); }).mouseout(function () { clearTimeout(setTimeouId); }); }); $("#realContentin").load("HTMLPage.htm"); $("#secondDiv li").each(function (index) { $(this).click(function () { /*更改樣式*/ $("#secondDiv li.tabin").removeClass("tabin"); $(this).addClass("tabin"); if (index == 0) { $("#realContentin").load("HTMLPage.htm"); } else if (index == 1) { $("#realContentin").load("Default.aspx div"); } else if (index == 2) { } }); }); //我剛開始的時候用的是jquery的最新版本，但是出現了無法綁定的問題。 $("#secondContentin img").bind("ajaxStart", function () { $(this).show(); }).bind("ajaxStop", function () { //setTimeout(function(){$(this).hide()},300); $(this).hide(1000); }); }); 在這里，我想提一下，就是我開始的時候，用的是jquery-1.9.1.min.js，但是在綁定ajax事件的時候，無法綁定，可以綁定click事件。
所以，我建議大家不要用最新版的jquery，避免出現一些莫名其妙的問題。
以上兩種標簽頁效果，希望小編整理的這篇文章可以幫助到大家。
新聞熱點
疑難解答
