JS實現標簽頁效果(配合css)
編輯：關於JavaScript
實現的效果：
如上圖所示為制作的標簽頁，我們想要實現的效果是當鼠標移到某一個標簽的時候，在下面的內容區顯示對應的內容，並且相應標簽的顏色需要改變，如圖中所示當前鼠標的位置在“標簽1”上，則內容區域顯示的內容為“我是內容1”，並且“標簽1”的顏色要比“標簽2”和“標簽3”深一些，同樣鼠標移到“標簽2”和“標簽3”的時候顯示“我是內容2”和“我是內容3”。這樣的效果是CSS和JS配合實現的。下面我們就來看看具體代碼：
首先來看HTML代碼：
復制代碼 代碼如下:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>標簽頁效果</title>
<link href="../CSS/tab.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="../JS文件/jquery.js"></script>
<script language="JavaScript" 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 id="contentnow" class="contentfirst contentin">我是內容1</div>
<div id="contentnow" class="contentfirst">我是內容2</div>
<div id="contentnow" class="contentfirst">我是內容3</div>
</body>
</html>
JS代碼實現思路很簡單，首先給每個標簽項注冊一個mouseover函數，當鼠標移到任何一個標簽上的時候都會執行moveover函數體內的代碼。函數體代碼首先獲取當前節點，將原來顯示的內容進行隱藏，然後根據傳入的節點index把對應於相應標簽下的內容顯示出來。在代碼中我們可以看到除了對HTML中節點樣式進行改動外還使用了setTimeout函數，該函數的作用是延遲函數的執行時間，下面代碼中的延遲時間為300毫秒，也就是當鼠標移到標簽後並不是立即執行而是延遲300毫秒後在執行，如果在300毫秒時間內鼠標移出標簽區域則不再執行該代碼。
復制代碼 代碼如下:
$(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函數，當點擊每個標簽的時候在原內容區域可以裝載不同的頁面或任意頁面的一部分，有興趣的話可以點擊這裡下載源碼。該源碼中包含了文中所提到的兩種不同函數所實現的不同功能。
如上圖所示為制作的標簽頁，我們想要實現的效果是當鼠標移到某一個標簽的時候，在下面的內容區顯示對應的內容，並且相應標簽的顏色需要改變，如圖中所示當前鼠標的位置在“標簽1”上，則內容區域顯示的內容為“我是內容1”，並且“標簽1”的顏色要比“標簽2”和“標簽3”深一些，同樣鼠標移到“標簽2”和“標簽3”的時候顯示“我是內容2”和“我是內容3”。這樣的效果是CSS和JS配合實現的。下面我們就來看看具體代碼：
首先來看HTML代碼：
復制代碼 代碼如下:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>標簽頁效果</title>
<link href="../CSS/tab.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="../JS文件/jquery.js"></script>
<script language="JavaScript" 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 id="contentnow" class="contentfirst contentin">我是內容1</div>
<div id="contentnow" class="contentfirst">我是內容2</div>
<div id="contentnow" class="contentfirst">我是內容3</div>
</body>
</html>
JS代碼實現思路很簡單，首先給每個標簽項注冊一個mouseover函數，當鼠標移到任何一個標簽上的時候都會執行moveover函數體內的代碼。函數體代碼首先獲取當前節點，將原來顯示的內容進行隱藏，然後根據傳入的節點index把對應於相應標簽下的內容顯示出來。在代碼中我們可以看到除了對HTML中節點樣式進行改動外還使用了setTimeout函數，該函數的作用是延遲函數的執行時間，下面代碼中的延遲時間為300毫秒，也就是當鼠標移到標簽後並不是立即執行而是延遲300毫秒後在執行，如果在300毫秒時間內鼠標移出標簽區域則不再執行該代碼。
復制代碼 代碼如下:
$(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函數，當點擊每個標簽的時候在原內容區域可以裝載不同的頁面或任意頁面的一部分，有興趣的話可以點擊這裡下載源碼。該源碼中包含了文中所提到的兩種不同函數所實現的不同功能。
- 上一頁:JS模板實現方法
- 下一頁:JS實現下拉框的動態添加(附效果)
小編推薦
熱門推薦