快捷導(dǎo)航

jquery入門—編寫一個導(dǎo)航條(可伸縮)

更新時間：2013年01月07日 11:08:03 作者：

編寫一個導(dǎo)航條，單擊標(biāo)題時，可以伸縮導(dǎo)航條內(nèi)容，簡化內(nèi)容或顯示更多內(nèi)容等等效果相當(dāng)不錯，感興趣的朋友可以了解下哦

1、編寫一個導(dǎo)航條，單擊標(biāo)題時，可以伸縮導(dǎo)航條內(nèi)容，簡化內(nèi)容或顯示更多內(nèi)容。
示例代碼如下：

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<script language="javascript" type="text/javascript" src="jquery-1.8.3.min.js"> 
</script> 
<style type="text/css"> 
body{font-size:13px} 
#divFrame{border:solid 1px #666;width:301px;overflow:hidden} 
#divFrame .clsHead{background-color:#eee;padding:8px;height:18px;cursor:hand} 
#divFrame .clsHead h3{padding:0px;margin:0px;float:left} 
#divFrame .clsHead span{float:right;margin-top:3px} 
#divFrame .clsContent{padding:8px} 
#divFrame .clsContent ul{list-style-type:none;margin:0px;padding:0px} 
#divFrame .clsContent ul li{float:left;width:95px;height:23px;line-height:23px} 
#divFrame .clsBot{float:right;padding-top:5px;padding-bottom:5px} 
.GetFocus{background-color:#eee} 
</style> 
<script type="text/javascript"> 
$(function(){ //頁面加載事件 
$(".clsHead").click(function(){ //圖片點擊事件 
if($(".clsContent").is(":visible")){ //如果內(nèi)容可見 
$(".clsHead span img").attr("src","Images/a1.gif"); //改變圖片 
$(".clsContent").css("display","none"); //隱藏內(nèi)容 
}else{ 
$(".clsHead span img").attr("src","Images/a2.gif"); //改變圖片 
$(".clsContent").css("display","block");//顯示內(nèi)容 
} 
}); 
$(".clsBot > a").click(function(){ //熱點鏈接點擊事件 
if($(".clsBot > a").text()=="簡化"){ //如果內(nèi)容為'簡化'字樣 
$("ul li:gt(4):not(:last)").hide(); //隱藏index號大于4且不是最后一項的元素 
$(".clsBot > a").text("更多"); //將字符內(nèi)容更改為"更多" 
}else{ 
$("ul li:gt(4):not(:last)").show().addClass("GetFocus"); //顯示所選元素且增加樣式 
$(".clsBot > a").text("簡化"); //將字符內(nèi)容更改為"簡化" 
} 
}); 
}); 
</script> 
</HEAD> 
<BODY> 
<div id="divFrame"> 
<div class="clsHead"> 
<h3>圖書分類</h3> 
<span><img src="Images/a2.gif" alt="book!"/></span> 
</div> 
<div class="clsContent"> 
<ul> 
<li><a href="#">小說</a><i> ( 1110 ) </i></li> 
<li><a href="#">文藝</a><i> ( 230 ) </i></li> 
<li><a href="#">青春</a><i> ( 1430 ) </i></li> 
<li><a href="#">少兒</a><i> ( 1560 ) </i></li> 
<li><a href="#">生活</a><i> ( 870 ) </i></li> 
<li><a href="#">社科</a><i> ( 1460 ) </i></li> 
<li><a href="#">管理</a><i> ( 1450 ) </i></li> 
<li><a href="#">計算機</a><i> ( 1780 ) </i></li> 
<li><a href="#">教育</a><i> ( 930 ) </i></li> 
<li><a href="#">工具書</a><i> ( 3450 ) </i></li> 
<li><a href="#">引進版</a><i> ( 980 ) </i></li> 
<li><a href="#">其它類</a><i> ( 3230 ) </i></li> 
</ul> 
</div> 
<div class="clsBot"> 
<a href="#">簡化</a> 
<img src="Images/a5.gif" alt=""/> 
</div> 
</div> 
</BODY> 
</HTML> 