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 分页——jqueryPage.js
jQuery入门,jQuery入门,jQuery入门,jQuery入门
前端 , jQuery——固定导航栏 , 若窗口被卷上去的高度大于等于顶部top的高度时 让导航栏变成固定定位,定位到距离顶部为0的位置
jQuery游戏——小鸟飞行
导航条在项目中的应用,主要用jQuery实现一些内容显示和隐藏
jqueryeasyui——1.25jar包该框架功能很强大,用好了做出来的项目真是美观方便,学业简单快
jquery入门jquery入门jquery入门jquery入门
jQuery下拉滑动切换导航条,jQuery实现下拉菜单导航条
简单好用的jQuery插件——Tdrag.js可以任意拖拽div内容.zip
jQuery阶梯动画导航条
自己封装的实现无限级别延展功能的多级菜单,扩展源码简单,适合初学者学习。(不喜勿喷)
jQuery阶梯动画导航条 jQuery阶梯动画导航条网页特效.zip
1、在DOM对象的实践操作中,既然存在用于绑定事件的bind方法,也相应存在用于移出绑定事件的方法,在JQuery中,可以通过unbind方法移除所有绑定的事件或某一个事件。 2、示例代码: 代码如下:<!DOCTYPE ...
jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单
jquery入门培训jquery入门培训jquery入门培训jquery入门培训jquery入门培训jquery入门培训
jQuery validation 1.6.zip 包括全部类库和一些demo。
jquery英文导航条鼠标滑过中英文字导航条滑动切换显示 jquery英文导航条鼠标滑过中英文字导航条滑动切换显示 jquery英文导航条鼠标滑过中英文字导航条滑动切换显示 jquery英文导航条鼠标滑过中英文字导航条滑动切换...
jQuery实例讲解——通过一些小实例讲解jQuery的应用
1、通过映射的方式,给对象绑定多个事件。 2、示例代码: 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <... charset=utf-8″ />.../titl
jquery插件 提示框 用法: 注意:因为没有使用css文件,而且在jquery.tooltip.js里通过对象的形式定义css,所以使用时,需要修改jquery.tooltip.js里的图片路径。