首頁 > 開發者 > JavaScript

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

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

1、編寫一個導航條，單擊標題時，可以伸縮導航條內容，簡化內容或顯示更多內容。
範例程式碼如下：
複製代碼 代碼如下:
<!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")){ //如果內容可見
$(".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="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>

2、：


點擊後：


簡化後：

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More