Linux教程網 >> Linux編程 >> Linux編程 >> jQuery簡單導航條的實現

jQuery簡單導航條的實現

日期：2017/3/1 10:58:48 编辑：Linux編程

示例代碼：

<head>
<title>導航條在項目中的應用</title>
<script language="javascript" type="text/javascript"
src="../Jscript/jquery-1.5.2.js"></script>
<style>
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")){ //如果內容可見
$(".clsHead span img").attr("src","../Images/a1.gif"); //改變圖片
$(".clsContent").css("display","none"); //隱藏內容
}else{
$(".clsHead span img").attr("src","../Images/a2.gif"); //改變圖片
$(".clsContent").css("display","block");//顯示內容
}
});
$(".clsBot > a").click(function(){ //熱點鏈接點擊事件
if($(".clsBot > a").text()=="簡化"){ //如果內容為'簡化'字樣
$("ul li:gt(4):not(:last)").hide(); //隱藏index號大於4且不是最後一項的元素
$(".clsBot > a").text("更多"); //將字符內容更改為"更多"
}else{
$("ul li:gt(4):not(:last)").show().addClass("GetFocus"); //顯示所選元素且增加樣式
$(".clsBot > a").text("簡化"); //將字符內容更改為"簡化"
}
});
});
</script>
</head>
<body>
<div id="divFrame">
<div class="clsHead">
<h3>圖書分類</h3>
<span><img src="../Images/a2.gif" alt=""/></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 class="clsBot"><a href="#">簡化</a><img src="../Images/a5.gif" alt=""/></div>
</div>
</div>
</body>
</html>

說明：在上面的代碼中，首先通過$(".clsContent").css("display","none");獲取類名稱為"clsContent"的元素對象集合，並實現對其內容的隱藏和顯示。

$(".clsHead span img").attr("src","../Images/a1.gif"); .clsHead span img 表示獲取類型clsHead中<span>標記下<img>標記，即圖片元素。
attr（key，value）是jquery中一個設置元素屬性的函數。其功能是為所匹配的��素設置屬性值，key是屬性的名稱，value是屬性值或內容。因此這行代碼的主要作用是獲取圖片
元素並改變圖片的來源。