快捷導(dǎo)航

JS實(shí)現(xiàn)標(biāo)簽頁效果(配合css)

更新時(shí)間：2013年04月03日 15:22:11 投稿：whsnow

實(shí)現(xiàn)的效果是當(dāng)鼠標(biāo)移到某一個(gè)標(biāo)簽的時(shí)候，在下面的內(nèi)容區(qū)顯示對(duì)應(yīng)的內(nèi)容，并且相應(yīng)標(biāo)簽的顏色需要改變,這樣的效果是CSS和JS配合實(shí)現(xiàn)的,下面我們就來看看具體代碼

實(shí)現(xiàn)的效果：

如上圖所示為制作的標(biāo)簽頁，我們想要實(shí)現(xiàn)的效果是當(dāng)鼠標(biāo)移到某一個(gè)標(biāo)簽的時(shí)候，在下面的內(nèi)容區(qū)顯示對(duì)應(yīng)的內(nèi)容，并且相應(yīng)標(biāo)簽的顏色需要改變，如圖中所示當(dāng)前鼠標(biāo)的位置在“標(biāo)簽1”上，則內(nèi)容區(qū)域顯示的內(nèi)容為“我是內(nèi)容1”，并且“標(biāo)簽1”的顏色要比“標(biāo)簽2”和“標(biāo)簽3”深一些，同樣鼠標(biāo)移到“標(biāo)簽2”和“標(biāo)簽3”的時(shí)候顯示“我是內(nèi)容2”和“我是內(nèi)容3”。這樣的效果是CSS和JS配合實(shí)現(xiàn)的。下面我們就來看看具體代碼：

首先來看HTML代碼：

復(fù)制代碼代碼如下:

<!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>標(biāo)簽頁效果</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">標(biāo)簽1</li>
<li>標(biāo)簽2</li>
<li>標(biāo)簽3</li>
</ul>
&nbsp;<div id="contentnow" class="contentfirst contentin">我是內(nèi)容1</div>
<div id="contentnow" class="contentfirst">我是內(nèi)容2</div>
<div id="contentnow" class="contentfirst">我是內(nèi)容3</div>
</body>
</html>

JS代碼實(shí)現(xiàn)思路很簡單，首先給每個(gè)標(biāo)簽項(xiàng)注冊一個(gè)mouseover函數(shù)，當(dāng)鼠標(biāo)移到任何一個(gè)標(biāo)簽上的時(shí)候都會(huì)執(zhí)行moveover函數(shù)體內(nèi)的代碼。函數(shù)體代碼首先獲取當(dāng)前節(jié)點(diǎn)，將原來顯示的內(nèi)容進(jìn)行隱藏，然后根據(jù)傳入的節(jié)點(diǎn)index把對(duì)應(yīng)于相應(yīng)標(biāo)簽下的內(nèi)容顯示出來。在代碼中我們可以看到除了對(duì)HTML中節(jié)點(diǎn)樣式進(jìn)行改動(dòng)外還使用了setTimeout函數(shù)，該函數(shù)的作用是延遲函數(shù)的執(zhí)行時(shí)間，下面代碼中的延遲時(shí)間為300毫秒，也就是當(dāng)鼠標(biāo)移到標(biāo)簽后并不是立即執(zhí)行而是延遲300毫秒后在執(zhí)行，如果在300毫秒時(shí)間內(nèi)鼠標(biāo)移出標(biāo)簽區(qū)域則不再執(zhí)行該代碼。

復(fù)制代碼代碼如下:

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

//每一個(gè)包裝的li的JQuery對(duì)象都會(huì)執(zhí)行function中的代碼
//index是當(dāng)前執(zhí)行這個(gè)function代碼的li對(duì)應(yīng)在所有l(wèi)i組成的數(shù)組中的索引值
//有了index的值后，就可以找到當(dāng)前標(biāo)簽對(duì)應(yīng)的內(nèi)容區(qū)域
$(this).mouseover(function(){
var liNode = $(this);
timeoutid = setTimeout(function(){
//將原來顯示的內(nèi)容進(jìn)行隱藏
$("div.contentin").removeClass("contentin");
//將原來有tabin屬性的標(biāo)簽去掉tabin屬性
$("#tabfirst li.tabin").removeClass("tabin");
//將當(dāng)前標(biāo)簽對(duì)應(yīng)的內(nèi)容區(qū)域顯示出來
$("div.contentfirst").eq(index).addClass("contentin");
//$("div.contentfirst:eq(" + index + ")").addClass("contentin");
//將當(dāng)前標(biāo)簽增加tabin屬性
liNode.addClass("tabin");

},300);

}).mouseout(function(){

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