jquery導覽列在項目中的應用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jquery導覽列在項目中的應用</title>

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>

$(function () { //頁面加載事件

$(".clsHead").click(function () {

if ($(".clsContent").is(":visible")) { //如果内容可見

$(".clsHead span img").attr("src", "Images/a2.gif"); //改變圖檔

$(".clsContent").css("display", "none"); //隐藏内容

}

else {

$(".clsHead span img").attr("src", "Images/a1.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>

<h3>

圖書分類</h3>

<span>

</div>

<ul>

</ul>

</div>

</body>

</html>

jquery導覽列在項目中的應用

繼續閱讀

jQuery實作百度搜尋框

（C# 程式設計指南）

ASP.NET中存取圖檔到資料庫的示例(C#)

兩種清除浮動的方法

2010年終總結--技術篇

可變參數宏， Variadic Macros

不用iconv函數實作UTF-8編碼轉換GB2312的PHP函數

jQuery練習一. 選擇器練習二. DOM操作練習三. 事件練習

struts2 +jquey uploadify3.2 實作多檔案上傳，可預覽、删除、排序

JQuery--dom捕獲html元素

C#多線程——前台線程和背景線程

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

IE8 CSS設定DIV居中，添加“margin:0 auto”

Small tricks

jquery_126_demo

無元件上傳圖檔到資料庫中，最完整解決方案