jquery入门—编写一个导航条(可伸缩)


Posted in Javascript onJanuary 07, 2013

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、效果图

jquery入门—编写一个导航条(可伸缩)

点击后:

jquery入门—编写一个导航条(可伸缩)

简化后:

jquery入门—编写一个导航条(可伸缩)

Javascript 相关文章推荐
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
Mar 26 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
May 28 Javascript
JS循环遍历JSON数据的方法
Jul 08 Javascript
使用jquery解析XML示例代码
Sep 05 Javascript
jQuery中:not选择器用法实例
Dec 30 Javascript
JavaScript数组Array对象增加和删除元素方法总结
Jan 20 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
Mar 02 Javascript
浅析javascript中的事件代理
Nov 06 Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
JavaScript生成随机验证码代码实例
Sep 28 Javascript
微信小程序实现购物车功能
Nov 18 Javascript
jquery入门—访问DOM对象方法
Jan 07 #Javascript
jQuery.clean使用方法及思路分析
Jan 07 #Javascript
js获取height和width的方法说明
Jan 06 #Javascript
javascript时间自动刷新实现原理与步骤
Jan 06 #Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
Jan 06 #Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 #Javascript
javascript编码的几个方法详细介绍
Jan 06 #Javascript
You might like
PHP调用三种数据库的方法(2)
2006/10/09 PHP
PHP序列号生成函数和字符串替换函数代码
2012/06/07 PHP
ajax取消挂起请求的处理方法
2013/03/18 PHP
thinkphp模板用法和内容输出实例
2014/11/28 PHP
php自定义类fsocket模拟post或get请求的方法
2015/07/31 PHP
PHP指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
基于Jquery插件实现跨域异步上传文件功能
2016/04/26 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
2020/11/16 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
微信小程序 动画的简单实例
2017/10/12 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
2018/04/12 jQuery
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
Zabbix实现微信报警功能
2016/10/09 Python
Python网络编程详解
2017/10/31 Python
详解python上传文件和字符到PHP服务器
2017/11/24 Python
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
Python的in,is和id函数代码实例
2020/04/18 Python
贝佳斯官方网站:Borghese
2020/05/08 全球购物
银行内勤岗位职责
2014/04/09 职场文书
老公给老婆的保证书
2014/04/28 职场文书
运动会班级口号
2014/06/09 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
2014客服代表实习自我鉴定
2014/09/18 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
先进事迹材料怎么写
2014/12/30 职场文书
物业公司管理制度
2015/08/05 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL