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 parseInt字符转化为数字函数使用小结
Nov 05 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
Nov 30 Javascript
ie中js创建checkbox默认选中问题探讨
Oct 21 Javascript
Google 地图API资料整理及详细介绍
Aug 06 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 Javascript
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
Require.js的基本用法详解
Jul 03 Javascript
详解npm 配置项registry修改为淘宝镜像
Sep 07 Javascript
微信公众号H5支付接口调用方法
Jan 10 Javascript
vuex vue简单使用知识点总结
Aug 29 Javascript
Vue实现Layui的集成方法步骤
Apr 10 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数字格式化
2006/12/06 PHP
简单的php文件上传(实例)
2013/10/27 PHP
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
php操作(删除,提取,增加)zip文件方法详解
2015/03/12 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
禁止F5等快捷键的JS代码
2007/03/06 Javascript
javascript 建设银行登陆键盘
2008/06/10 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
React传值 组件传值 之间的关系详解
2019/08/26 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
python读取中文txt文本的方法
2018/04/12 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
详解Ubuntu16.04安装Python3.7及其pip3并切换为默认版本
2019/02/25 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
手摸手教你用canvas实现给图片添加平铺水印的实现
2019/08/20 HTML / CSS
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
自荐信封面
2013/12/04 职场文书
项目总经理岗位职责
2014/02/14 职场文书
查摆问题整改措施
2014/10/24 职场文书
母亲节寄语大全
2015/02/27 职场文书
婚育证明样本
2015/06/16 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript