实现一个导航栏，单机不同的商品名称链接，显示相应的内容，同时高亮显示当前选择的商品。
实现功能如图：
css:
1 /* reset */ 2 body{margin:0;padding:0 0 12px 0;font-size:12px;line-height:22px;font-family:"\5b8b\4f53","Arial Narrow";background:#fff;} 3 form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;} 4 input,select{font-size:12px;line-height:16px;} 5 img{border:0;} 6 ul,li{list-style-type:none;} 7 a {color:#00007F;text-decoration:none;} 8 a:hover {color:#bd0a01;text-decoration:underline;} 9 10 .box { 11 width: 150px; 12 margin: 0 auto; 13 } 14 .menu{ 15 overflow:hidden; 16 border-color: #C4D5DF; 17 border-style: solid; 18 border-width: 0 1px 1px; 19 } 20 /* lv1 */ 21 .menu li.level1 a{ 22 display: block; 23 height: 28px; 24 line-height: 28px; 25 background:#EBF3F8; 26 font-weight:700; 27 color: #5893B7; 28 text-indent: 14px; 29 border-top: 1px solid #C4D5DF; 30 } 31 .menu li.level1 a:hover{text-decoration:none;} 32 .menu li.level1 a.current{background:#B1D7EF;} 33 /* lv2 */ 34 .menu li ul{overflow:hidden;} 35 .menu li ul.level2{display:none;} 36 .menu li ul.level2 li a{ 37 display: block; 38 height: 28px; 39 line-height: 28px; 40 background:#ffffff; 41 font-weight:400; 42 color: #42556B; 43 text-indent: 18px; 44 border-top: 0px solid #ffffff; 45 overflow: hidden; 46 } 47 .menu li ul.level2 li a:hover{ 48 color:#f60; 49 }
jQuery以及HTML：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>链式操作风格</title> <link rel="stylesheet" href="css/default.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.7.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".level1 > a").click(function(){ $(this).addClass("current") //给当前元素添加"current"样式 .next().show() //下一个元素显示 .parent().siblings().children("a").removeClass("current") //父元素的兄弟元素的子元素<a>移除"current"样式 .next().hide(); //它们的下一个元素隐藏 return false; }); }); </script> </head> <body> <h2>网页导航栏</h2> <div class="box"> <ul class="menu"> <li class="level1"> <a href="#none">衬衫</a> <ul class="level2"> <li><a href="#none">长袖衬衫</a></li> <li><a href="#none">短袖衬衫</a></li> <li><a href="#none">无袖衬衫</a></li> <li><a href="#none">套头衬衫</a></li> </ul> </li> <li class="level1"> <a href="#none">卫衣</a> <ul class="level2"> <li><a href="#none">开襟卫衣</a></li> <li><a href="#none">套头卫衣</a></li> <li><a href="#none">长袖卫衣</a></li> <li><a href="#none">童装卫衣</a></li> </ul> </li> <li class="level1"> <a href="#none">裤子</a> <ul class="level2"> <li><a href="#none">短裤子</a></li> <li><a href="#none">牛仔裤子</a></li> <li><a href="#none">棉麻裤子</a></li> <li><a href="#none">西装裤子</a></li> </ul> </li> </ul> </div> </body> </html>
