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 相关文章推荐
JavaScript null和undefined区别分析
Oct 14 Javascript
javaScript中Math()函数注意事项
Jun 18 Javascript
JavaScript中数据结构与算法(二):队列
Jun 19 Javascript
详解jQuery Mobile自定义标签
Jan 06 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
May 16 Javascript
浅谈Node.js 中间件模式
Jun 12 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
Sep 15 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
May 31 Javascript
JavaScript实例 ODO List分析
Jan 22 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
关于我转生变成史莱姆这档事:第二季PV上线,萌王2021年回归
2020/05/06 日漫
php网页病毒清除类
2014/12/08 PHP
PHP实现查询手机归属地的方法详解
2017/04/28 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
jQuery 选择表格(table)里的行和列及改变简单样式
2012/12/15 Javascript
JavaScript中SetInterval与setTimeout的用法详解
2015/11/10 Javascript
Bootstrap实现登录校验表单(带验证码)
2016/06/23 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
浅谈JS函数节流防抖
2017/10/18 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
vue实现的组件兄弟间通信功能示例
2018/12/04 Javascript
Node.js Buffer模块功能及常用方法实例分析
2019/01/05 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
使用Python操作MySQL的一些基本方法
2015/08/16 Python
Python中asyncore异步模块的用法及实现httpclient的实例
2016/06/28 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
python中常用的数据结构介绍
2021/01/12 Python
Vuori官网:运动服装的终级表现
2021/01/27 全球购物
勤俭节约演讲稿
2014/05/08 职场文书
电子商务专业毕业生求职信
2014/06/12 职场文书
学生喝酒检讨书500字
2014/11/02 职场文书
文言文辞职信
2015/02/28 职场文书
倡议书格式及范文
2015/04/29 职场文书
CSS实现章节添加自增序号的方法
2021/06/23 HTML / CSS
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL