Jquery | 基础 | 导航条在项目中的应用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | <! 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 > < title > 导航条在项目中的应用 </ title > < script language="javascript" type="text/javascript" src="jquery-3.3.1.min.js"></ script > < style > body{font-size:13px} #divFrame{ border:solid 1px #666; width:202px; /**overflow作用**/ 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 > </ head > < 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 > </ ul > < div class="clsBot">< a href="#"> 简化 </ a > < img src="Images/ a5.gif" alt="" /> </ div > </ div > </ div > </ body > </ html > |
分类:
Web | Jquery