<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery学习系统-导航条在项目中的应用</title>
<link href="/res/common.css" rel="stylesheet" type="text/css">
<style type="text/css">
#divFrame{
width:301px;
font-size:14px;
border:1px solid #00CCFF;
overflow:hidden;
}
#divFrame .clsHead{
padding:8px;
background-color:#EEE;
height:18px;
cursor:pointer;
}
#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;
padding:0px;
margin:0px;
}
#divFrame .clsContent ul li{
float:left;
width:95px;
height:23px;
line-height:23px;
}
#divFrame .clsContent ul li:nth-child(n+6){
display:none;
}
#divFrame .clsContent ul li:nth-last-child(1){
display:block;
}
#divFrame .clsContent .clsBot{
float:right;
padding-top:5px;
padding-bottom:5px;
}
.getFocus{
background-color:#EEE;
}
</style>
<script type="text/javascript" src="/res/jquery-1.6.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".clsHead").click(function(){
if($(".clsContent").is(":visible")){//如果列表内容可见
$(".clsHead span img").attr("src","/img/down.gif");//改变图片内容
$(".clsContent").css("display","none");//隐藏内容
}else{
$(".clsHead span img").attr("src","/img/up.gif");//改变图片内容
$(".clsContent").css("display","block");//显示内容
}
});
$(".clsBot > a").click(function(){
if($(".clsBot > a").text()=="简化"){
$("ul li:gt(4):not(:last)").hide();//可以看出li的index是从0开始的
$(".clsBot > a").text("更多");
$(".clsBot > img").attr("src","/img/down.gif");
}else{
$("ul li:gt(4):not(:last)").show().addClass("getFocus");
$(".clsBot > a").text("简化");
$(".clsBot > img").attr("src","/img/up.gif");
}
});
});
</script>
</head>
<body>
<div align="center">
<div id="divFrame">
<div class="clsHead">
<h3>图书分类</h3><span><img src="/img/up.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>(1560)</i></li>
<li><a href="#">少儿</a><i>(1432)</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="/img/down.gif" alt=""/>
</div>
</div>
</div>
</div>
</body>
</html>
代码运行后的显示效果:(见附件)
- 大小: 4.5 KB
分享到:
相关推荐
KENWOOD 简易操作手册 GPS 导航系统 KNA-G430CN KENWOOD 简易操作手册 GPS 导航系统 KNA-G430CN 是一款功能强大且易于使用的 GPS 导航系统。该系统提供了详细的操作手册,帮助用户快速掌握系统的使用。 目录 1. ...
本资源包,"ASP.NET通用模块及典型系统开发实例导航",显然是针对ASP.NET开发者设计的,旨在帮助他们理解和掌握在实际项目中常用的功能模块以及如何构建典型系统。 1. ASP.NET通用模块:这些模块是可复用的组件,...
TU-30 GPS模块是美国罗克韦尔公司的GPS产品,其特点是体积小、接口简单、可靠性好。模块的组织结构是一个用于接收GPS信号的单片机小系统。GPS信号接收部分由Rocwell自行设计开发的芯片及其外围电路组成。其控制内核...
7.2 简单文本编辑模块的实现 7.3 带格式的编辑模块的实现 第8章 打印和打印预览模块 8.1 visual c++中的打印预览功能 8.2 解决内容受打印机分辨率影响的问题 8.3 设置页边距 8.4 添加页眉页脚 8.5 ...
7.2 简单文本编辑模块的实现 7.3 带格式的编辑模块的实现 第8章 打印和打印预览模块 8.1 visual c++中的打印预览功能 8.2 解决内容受打印机分辨率影响的问题 8.3 设置页边距 8.4 添加页眉页脚 8.5 ...
本压缩包"51单片机典型模块设计实例导航资料.rar"提供了丰富的学习资源,旨在帮助用户深入理解和掌握51单片机在实际应用中的各种技巧和方法。 51单片机的核心是Intel的8051微处理器,它具有内置的RAM、ROM、定时器/...
在这个“Prism模块化、导航、Dialog和消息订阅”的主题中,我们将深入探讨这些关键概念。 1. **模块化**: - **模块定义**:在Prism中,模块是一种可重用的代码单元,包含了业务逻辑、视图和视图模型。它们可以...
本资料集“51单片机典型模块设计实例导航”旨在帮助学习者深入理解和实践51单片机的各种功能模块,提升实际操作能力。 首先,51单片机的核心部件是中央处理器CPU,它执行存储在内部程序存储器中的指令,控制整个...
由于没有动态数据的处理,静态页面的导航通常更简单,但也需要精心设计,确保用户能够轻松找到所需信息。 3. 页面导航设计: 有效的页面导航定位模块应具备以下特点: - 清晰直观:导航菜单应该简洁明了,避免过多...
在本文中,我们将深入探讨如何使用WPF(Windows Presentation Foundation)框架结合MvvmLight库创建一个简单的导航实例。MvvmLight是由GalaSoft开发的轻量级MVVM(Model-View-ViewModel)库,它为WPF应用提供了一...
7.2 简单文本编辑模块的实现 7.3 带格式的编辑模块的实现 第8章 打印和打印预览模块 8.1 visual c++中的打印预览功能 8.2 解决内容受打印机分辨率影响的问题 8.3 设置页边距 8.4 添加页眉页脚 8.5 ...
### 常见的7种GNSS卫星定位导航中的GPS模块与北斗模块解析 #### 一、概述 随着全球卫星导航系统的快速发展和技术进步,各种基于GPS(Global Positioning System)和北斗系统的定位模块应运而生。SKYLAB作为一家...
串口连接相对简单,只需将模块的VCC、RX、TX、GND引脚分别接至USB转串口模块的相应电平即可。IIC连接则需要一个上拉电阻来实现多个模块在同一总线上挂载的能力。 软件操作方面,用户首先需要将模块通过USB-TTL模块...
### 知识点:简易GPS导航仪的实现 #### 一、项目背景与目标 简易GPS导航仪的实现源程序是北京航空航天大学导航与控制专业的一组本科生在教授张海和张立勇的指导下完成的一个项目。项目名称为“GPS_LCD导航系统实验...
自带暗黑模式一键切换,多种功能模块随心搭配,更有游客自动投稿...这款 WordPress 主题自带暗黑模式一键切换,多种功能模块随心搭配,更有游客自动投稿,可以说是一款在免费WordPress导航主题中,称得上优秀的作品了。
【ASP简易网络导航系统】是一种基于Active Server Pages (ASP)技术构建的网络应用,用于提供用户友好的在线导航服务。这种系统通常包含了基础的用户管理和网页浏览功能,旨在帮助用户快速找到并访问他们感兴趣的网站...
在Arduino项目中,可以使用串口监视器作为简单的测试工具,查看模块是否发送正确的GPS数据。 最后,提到的**Arduino例程**是实现上述功能的具体代码示例。这些示例代码通常会包含初始化GPS模块、设置串口通信、定期...
### SIM68VB_北斗导航模块硬件设计手册关键知识点解析 #### 一、绪论与概述 **SIM68VB**是一款集成了北斗和GPS双模定位系统的高性能导航模块,适用于各类需要高精度定位的应用场景。该模块具备标准NMEA语句接口,...
该模块支持GPS、GLONASS、Galileo、BeiDou等全球导航卫星系统(GNSS),具备快速定位能力和优秀的抗干扰性能。源码可能涉及与模块通信的串口驱动、位置解析算法以及初始化和控制命令。 3. **源码分析**: 源码部分...
TU-30 GPS模块是美国罗克韦尔公司的产品,体积小、接口简单、可靠性好。该模块具备单片机小系统的组织结构,可接收GPS信号。控制内核为DSP处理器,拥有两个串口和时钟输出,外围电路含实时时钟、E2PROM、SRAM和ROM...