[JQ权威指南]第五天:导航条在项目中运用
2015-06-19 18:08
330 查看
1。在页面中创建一个导航条。点击标题时,可以伸缩导航条的内容,标题中的提示图片也随之改变
2。单击“简化”连接时,隐藏指定的内容,并将“简化”字样改为更多;单击“更多”连接时,返回初始状态,并改变指定显示元素的背景色。
2。单击“简化”连接时,隐藏指定的内容,并将“简化”字样改为更多;单击“更多”连接时,返回初始状态,并改变指定显示元素的背景色。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>导航条在项目中的使用</title> </head> <script language="javascript" type="text/javascript" src="jquery-2.1.4.js"></script> <style> 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()=="简化"){ //隐藏index号大于4且不是最后一项的元素 $("ul li:gt(4):not(:last)").hide(); //将字符内容更改为更多. $(".clsBot >a").text("更多"); }else{ $("ul li:gt(4):not(:last)").show() .addClass("GetFocus"); $(".clsBot > a").text("简化"); } }); }); </script> <body> <div id="divFrame"> <div class="clsHead"> <h3>图书分类</h3> <span><img src="Images/a2.gif" alt=""/></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><br /> </ul> </div> <div class="clsBot"> <a href="#">简化</a> <img src="Images/a5.gif" alt="" /> </div> </div> </body> </html>
相关文章推荐
- linux常用命令手册
- AFNetworking2.5使用
- js中RegExp类型
- hdu 1195 双向bfs
- AndroidUI设计之 布局管理器 - 详细解析布局实现
- cxf简单实例
- Classpath 设置了但是找不到包?
- Centos下源码包安装lamp常见的几个小问题
- mongoDB 3.0 安全权限访问控制
- Unity着色器入门之一步一步来看坐标系变换
- UVALive 4329--Ping pong+树状数组
- linux epoll模型
- JavaScript基础二 JS除错与调试、函数、对象、Array对象
- Spark火遍IT业界,AMPCamp来中国趁火打劫
- 几本书
- Mutual and feedback(互评与反馈)
- 详解CSS中clear:left/right的用法
- 新增activity报错,Could not execute method of the activity
- 优秀创业者
- 6.19 Media 音频&视频