[JQ权威指南]第五天:导航条在项目中运用
来源:互联网 发布:windows to go可以 编辑:程序博客网 时间:2024/06/03 14:36
1。在页面中创建一个导航条。点击标题时,可以伸缩导航条的内容,标题中的提示图片也随之改变
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>
0 0
- [JQ权威指南]第五天:导航条在项目中运用
- [JQ权威指南]第十四天:列表中导航菜单的运用
- [JQ权威指南]第十五天:网页选项卡的运用
- JQ权威指南:网页选项卡的运用
- Jquery导航条在项目中应用
- [JQ权威指南]第一天:事件操作链接式书写
- [JQ权威指南]第八天:复制元素节点
- [JQ权威指南]第八天:删除页面元素
- [JQ权威指南]第三天:JQ选择器之表格隔行变色
- [JQ权威指南]animate() 方法
- [JQ权威指南]JQ遍历JSON数据
- [JQ权威指南]JQ操作JSON数据
- [JQ权威指南]第七天:使用val()方法设置和获取元素的值
- [JQ权威指南]第九天:wrap()和wrapInner()方法包裹元素节点
- [JQ权威指南]简单的动画
- [JQ权威指南]移动位置的动画
- [JQ权威指南]getScript函数获取数据
- [JQ权威指南]$.ajax()方法发送请
- 黑马程序员——Java基础——Collection集合的总结
- vs2012编译caffe
- linux常用命令手册
- lucene的基础知识
- 响应式布局的一些要点
- [JQ权威指南]第五天:导航条在项目中运用
- JS问题汇总
- vss问题:客户端提示"Sourcesafe cannot find a default database.Would you like to select one?"
- 模拟POST上传文件
- myeclipse2015 相关插件安装
- java 日期工具
- 耐得住寂寞,才守得住繁华
- leetcode--Reorder List
- linux 信号量之SIGNAL 0