示例代碼：
- <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是屬性值或內容。因此這行代碼的主要作用是獲取圖片
- 元素並改變圖片的來源。
- if($(".clsContent").is(":visible"))//用來檢查當前內容的狀態。
- if($(".clsBot > a").text()=="簡化")// 在超鏈接事件中，檢查單擊的是“簡化”or “更多”。
- 其中$(".clsBot > a")用來獲取超鏈接元素，text（）是獲取元素內容的函數。
- $("ul li:gt(4):not(:last)").hide(); //隱藏index號大於4且不是最後一項的元素 兩個並列的過來選擇條件。
