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



 



 



 



点击后:



 



 



 



简化后:



 


点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

热门产品

历史上的今天:03月29日

热门专题

卓越综合高中|卓越综合高中
卓越综合高中
安徽开放大学|安徽开放大学报名,安徽开放大学报考,安徽开放大学,什么是安徽开放大学,安徽开放大学学历,安徽开放大学学费,安徽开放大学报名条件,安徽开放大学报名时间,安徽开放大学学历,安徽开放大学专业
安徽开放大学
开放大学|开放大学报名,开放大学报考,开放大学,什么是开放大学,开放大学学历,开放大学学费,开放大学报名条件,开放大学报名时间,开放大学学历,开放大学专业
开放大学
金诺幼儿园(春城路金诺幼儿园)|昆明官渡区幼儿园,幼儿园报名,官渡区幼儿园,春城路幼儿园,幼儿园招生,学前班,昆明幼儿园,金诺幼儿园,环城南路幼儿园,石井路幼儿园
金诺幼儿园(春城路金诺幼儿园)
大理科技管理学校|大理科技管理学校,大理科技,大理科技中等职业技术学校,大理科技管理中等职业技术学校,大理科技学校
大理科技管理学校
昆明网站建设|昆明网站建设,昆明网站开发,昆明网站建设公司,昆明网站建设价格,昆明网站设计,昆明网站制作,网页设计,高端网站建设,高端网站设计
昆明网站建设
云南网站建设|云南网站制作,网站建设,云南网站开发,云南网站设计,云南网页设计,云南网站建设公司,云南网站建设
云南网站建设
中源管业|中源管业,中源管业公司,中源管业有限公司,中源管业电话,中源管业地址,中源管业电力管,中源管业mpp电力管,中源管业cpvc电力管,中源管业pe穿线管
中源管业

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部