欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2013年01月07日 11:08:03   作者：  
編寫一個導(dǎo)航條，單擊標題時，可以伸縮導(dǎo)航條內(nèi)容，簡化內(nèi)容或顯示更多內(nèi)容等等效果相當不錯，感興趣的朋友可以了解下哦
1、編寫一個導(dǎo)航條，單擊標題時，可以伸縮導(dǎo)航條內(nèi)容，簡化內(nèi)容或顯示更多內(nèi)容。
示例代碼如下：
復(fù)制代碼 代碼如下:

<!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>

2、效果圖：


點擊后：


簡化后：

相關(guān)文章

  • jquery判斷復(fù)選框選中狀態(tài)以及區(qū)分attr和prop

    jquery判斷復(fù)選框選中狀態(tài)以及區(qū)分attr和prop

    這篇文章主要介紹了jquery判斷復(fù)選框選中狀態(tài)以及區(qū)分attr和prop，感興趣的小伙伴們可以參考一下
    2015-12-12
  • 解決jQuery上傳插件Uploadify出現(xiàn)Http Error 302錯誤的方法

    解決jQuery上傳插件Uploadify出現(xiàn)Http Error 302錯誤的方法

    這篇文章主要為大家詳細介紹了解決jQuery上傳插件Uploadify出現(xiàn)Http Error 302錯誤的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2015-12-12
  • 簡單實現(xiàn)jQuery級聯(lián)菜單

    簡單實現(xiàn)jQuery級聯(lián)菜單

    這篇文章主要為大家詳細介紹了如何簡單實現(xiàn)jQuery級聯(lián)菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-01-01
  • jquery實現(xiàn)倒計時效果

    jquery實現(xiàn)倒計時效果

    這篇文章主要介紹了jquery實現(xiàn)倒計時效果，根據(jù)設(shè)計一個游戲引出的倒計時功能，需要的朋友可以參考下
    2015-12-12
  • SpringMVC框架下JQuery傳遞并解析Json格式的數(shù)據(jù)是如何實現(xiàn)的

    SpringMVC框架下JQuery傳遞并解析Json格式的數(shù)據(jù)是如何實現(xiàn)的

    json作為一種輕量級的數(shù)據(jù)交換格式，在前后臺數(shù)據(jù)交換中占據(jù)著非常重要的地位。Json的語法非常簡單，采用的是鍵值對表示形式,本文給大家介紹SpringMVC框架下JQuery傳遞并解析Json格式的數(shù)據(jù)是如何實現(xiàn)的，對spring mvc ajax json相關(guān)知識感興趣的朋友一起學習吧
    2015-12-12
  • jQuery圖片切換插件jquery.cycle.js使用示例

    jQuery圖片切換插件jquery.cycle.js使用示例

    Cycle供了非常好的功能來幫助大家更簡單的使用插件的幻燈功能，下面是它的一個非常不錯的示例，大家可以學習下
    2014-06-06
  • JQuery 1.3.2以上版本中出現(xiàn)pareseerror錯誤的解決方法

    JQuery 1.3.2以上版本中出現(xiàn)pareseerror錯誤的解決方法

    最近正在做一個系統(tǒng)，測試組那邊不停的報告bug：后臺、前臺各種列表報告js彈出窗錯誤，內(nèi)容僅僅是一句“pareseerror”！
    2011-01-01

    • 最新評論