【JQuery】標籤頁效果
阿新 • • 發佈：2019-01-22
實踐是檢驗真理的唯一標準，不動手做，你永遠不知道你和目標的距離有多遠！
HTML：
<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta http-equiv="Contect-Type" content="text/html;charset=UTF-8"> <link type="text/css" rel = "stylesheet" href="user.css" /> <script type = "text/javascript" src="jquery-3.3.1.min.js"> </script> <script type ="text/javascript" src="tab.js"> </script> </head> <body> <ul id="tabfirst"> <li class="tabin">1</li> <li>2</li> <li>3</li> </ul> <div class="contentin contentfirst">content1</div> <div class="contentfirst">content2</div> <div class="contentfirst">content3</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>
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; //控制元素上滑鼠的樣式（pointer為手型樣式） cursor: pointer; } #tabsecond li.tabin { background-color: #F2F6FB; border: 1px solid black; border-bottom: 0; //首先設定相對定位 position: relative; //設定控制元素在介面的層高 z-index: 100; } #contentsecond { width: 500px; height: 200px; padding: 10px; background-color: #F2F6FB; clear: left; border: 1px solid black; //控制元素的定位方式（relative：為相對定位） position: relative; //向上移動一個畫素 top: -1px; } img { display: none; }
JS：
var timoutid; $(document).ready(function(){ //此處的each方法會遍歷li中的每一個物件執行function中的方法 //而index是li這個物件組對應物件的索引值，我們可以通過index找到li中的具體的某個物件 $("tabfirst li").each(function(index){ //滑鼠移除標籤觸犯的事件 $(this).mouseover(function(){ //獲取移除的標籤物件 var liNode=$(this); //事件觸發的延遲方法 timoutid=setTimeout(function(){ //去除樣式 $("div.contentin").removeClass("contentin"); $("#tabfirst li.tabin").removeClass("tabin"); //新增樣式 //$("div").eq(index).addClass("contentin"); $("div.contentfirst:eq("+index+")").addClass("contentin"); liNode.addClass("tabin"); },300); }).mouseout(function(){ //去除時間延時 clearTimeout(timoutid); }); }); $("realcontent").load("TabLoad.html"); $("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(""); //顯示想要展示的內容 $(this).show(); }).bind("ajaxStop",function(){ //slideUp方法可定義內容的顯示速度（引數可以是時間也可以是slow，normal，fast） $(this).slideUp("1000"); }); });
效果：
學習之後總結與思考，有何不足還請指出，最後感謝大家的閱讀和點贊！