首页 > 网络编程 > JavaScript > 网页特效 > 导航菜单 > jquery 导航设计 jquery 导航设计实现代码 学习jquery的朋友可以看下 2009-09-02 20:14:08 作者： jquery 导航设计，主要是通过jquery控制一些css样式变换。 <style type="text/css"> #menu{width:200px;} .has{background:#00DFAA; color:#FFFBF0; cursor:pointer} .hig{background:#FF5F55; color:#2A3F55;} div{padding:0px; margin:10px 0;} div a{background:#D41FAA; display:none; float:left; width:200px;} </style> <script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".has").click(function(){ $(this).addClass("hig").children("a").show().end().siblings().removeClass("hig").children("a").hide(); }); }); </script> <div id="menu"> <div class="has"> <span>第一章</span> <a>1.1哈哈哈哈哈哈</a> <a>1.2哈哈哈哈哈哈</a> <a>1.3哈哈哈哈哈哈</a> <a>1.4哈哈哈哈哈哈</a> </div> <div class="has"> <span>第二章</span> <a>2.1哈哈哈哈哈哈</a> <a>2.2哈哈哈哈哈哈</a> <a>2.3哈哈哈哈哈哈</a> <a>2.4哈哈哈哈哈哈</a> </div> <div class="has"> <span>第三章</span> <a>3.1哈哈哈哈哈哈</a> <a>3.2哈哈哈哈哈哈</a> <a>3.3哈哈哈哈哈哈</a> <a>3.4哈哈哈哈哈哈</a> </div> </div> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
