导航栏
<!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>1-5-1</title> <style type="text/css"> #menu { width: 300px; } .has_children { background: #555; color: #fff; cursor: pointer; } .hightlight { color: #fff; background: green; } div { padding: 0; margin: 10px 0; } div a { background: #888; display: none; float: left; width: 300px; } </style> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $(".has_children").click(function () { $(this).addClass("hightlight")//为当前元素增加hightlight类 .children("a").show().end()//子节点<a>元素显示,重新定位到上述操作元素 .siblings().removeClass("hightlight")//获取元素的兄弟元素,去掉它们的hightlight类 .children("a").hide(); //兄弟元素的<a>元素隐藏 }) }); </script> </head> <body> <div id="menu"> <div class="has_children"> <span>第一章</span> <a>1.1加入</a> </div> <div class="has_children"> <span>第二章</span> <a>2.1加入</a> </div> <div class="has_children"> <span>第三章</span> <a>3.1加入</a> </div> </div> </body> </html>