jQuery导航条在项目中的应用
jQuery导航条在项目中的应用:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery导航条在项目中的应用</title>
<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 src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(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>
<div id="divFrame">
<div class="clsHead">
<h3>
图书分类</h3>
<span>
<img src="Images/a1.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>(3220)</i></li>
</ul>
<div class="clsBot">
<a href="#">简化</a>
<img src="Images/a5.gif" alt="" />
</div>
</div>
</div>
</body>
</html>