JS實作標籤頁效果(配合css)_javascript技巧

實現的效果：

如上圖所示為製作的標籤頁，我們想要實現的效果是當滑鼠移到某一個標籤的時候，在下面的內容區顯示對應的內容，並且對應標籤的顏色需要改變，如圖中所示當前滑鼠的位置在“標籤1”上，則內容區域顯示的內容為“我是內容1”，並且“標籤1”的顏色要比「標籤2」和「標籤3」深一些，同樣滑鼠移到「標籤2」和「標籤3」的時候顯示「我是內容2」和「我是內容3」。這樣的效果是CSS和JS配合實現的。下面我們就來看看具體代碼：

首先來看HTML代碼：

複製代碼 代碼如下:

• 標籤1


• 標籤2


• 標籤3

 

我是內容1

我內容2

我是內容3

JS程式碼實現想法很簡單，先給每個標籤項目註冊一個mouseover函數，當滑鼠移到任何一個標籤上的時候都會執行moveover函數體內的程式碼。函數體程式碼先取得目前節點，將原先顯示的內容進行隱藏，然後根據傳入的節點index把對應於對應標籤下的內容顯示出來。在程式碼中我們可以看到除了對HTML中節點樣式進行改動外還使用了setTimeout函數，該函數的作用是延遲函數的執行時間，下面程式碼中的延遲時間為300毫秒，也就是當滑鼠移到標籤後並不是立即執行而是延遲300毫秒後在執行，如果在300毫秒時間內滑鼠移出標籤區域則不再執行該程式碼。

複製程式碼 程式碼如下:

$(document).ready(>

$(document).ready(function(){ var timeoutid;
$("#tabfirst li").each(function(index){

//每一個包裝的li的JQuery物件都會執行function中的程式碼
/ /index是目前執行這個function程式碼的li對應在所有li組成的陣列中的索引值
//有了index的值後，就可以找到目前標籤對應的內容區域
$(this). mouseover(function(){
var liNode = $(this);
timeoutid = setTimeout(function(){
//將原來顯示的內容隱藏
$("div.contentin" ).removeClass("contentin");
//將原來有tabin屬性的標籤去掉tabin屬性
$("#tabfirst li.tabin").removeClass("tabin");
//將目前標籤對應的內容區域顯示出來
$("div.contentfirst").eq(index).addClass("contentin");
//$("div.contentfirst:eq(" index " )").addClass("contentin");
//將目前標籤增加tabin屬性
liNode.addClass("tabin");

},300);

}).mouseout(function(){

clearTimeout(timeoutid);
});
});
});

除了該效果外，我們還可以利用相同的原理為每個標籤註冊click函數，當點擊每個標籤的時候在原內容區域可以裝載不同的頁面或任意頁面的一部分，有興趣的話可以點擊這裡下載源碼。此原始碼中包含了文中所提到的兩種不同函數所實現的不同功能。