<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>JQuery實例-標簽頁效果</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="css/tab.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/tab.js"></script> </head> <body> <ul id="tabfirst"> <li class="tabin">標簽1</li> <li>標簽2</li> <li>標簽3</li> </ul> <div class="contentin contentfirst">我是內容1</div> <div class="contentfirst">我是內容2</div> <div class="contentfirst">我是內容3</div> <br /> <br /> <br /> <ul id="tabsecond"> <li class="tabin">裝入完整頁面</li> <li>裝入部分頁面</li> <li>從遠程獲取數據</li> </ul> <div id="contentsecond"> <img alt="裝載中" src="images/img-loading.gif" /> <div id="realcontent"></div> </div> </body> </html>
var timoutid; $(document).ready(function(){ //找到所有的標簽 /* $("li").mouseover(function(){ //將原來顯示的內容區域進行隱藏 $("div.contentin").hide(); //當前標簽所對應的內容區域顯示出來 }); */ $("#tabfirst li").each(function(index){ //每一個包裝li的jquery對象都會執行function中的代碼 //index是當前執行這個function代碼的li對應在所有li組成的數組中的索引值 //有了index的值之后，就可以找到當前標簽對應的內容區域 $(this).mouseover(function(){ var liNode = $(this); timoutid = setTimeout(function(){ //將原來顯示的內容區域進行隱藏 $("div.contentin").removeClass("contentin"); //對有tabin的class定義的li清除tabin的class $("#tabfirst li.tabin").removeClass("tabin"); //當前標簽所對應的內容區域顯示出來 //$("div").eq(index).addClass("contentin"); $("div.contentfirst:eq(" + index + ")").addClass("contentin"); liNode.addClass("tabin"); },300); }).mouseout(function(){ clearTimeout(timoutid); }); }); //在整個頁面裝入完成后，標簽效果2的內容區域需要裝入靜態的html頁面內容 $("#realcontent").load("TabLoad.html"); //找到標簽2效果對應的三個標簽，注冊鼠標點擊事件 $("#tabsecond li").each(function(index){ $(this).click(function(){ $("#tabsecond li.tabin").removeClass("tabin"); $(this).addClass("tabin"); if (index == 0) { //裝入靜態完成頁面 $("#realcontent").load("TabLoad.html"); } else if (index == 1) { //裝入動態部分頁面 $("#realcontent").load("TabLoad.jsp h2"); } else if (index == 2) { //裝入遠程數據（這里也是一個動態頁面輸出的數據） $("#realcontent").load("TabData.jsp") } }); }); //對於loading圖片綁定ajax請求開始和交互結束的事件 $("#contentsecond img").bind("ajaxStart",function(){ //把div里面的內容清空 $("#realcontent").html(""); //整個頁面中任意ajax交互開始前，function中的內容會被執行 $(this).show(); }).bind("ajaxStop",function(){ //整個頁面中任意ajax交互結束后，function中的內容會被執行 $(this).slideUp("1000"); }); });
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; }