利用jquery实现导航栏

来源：互联网发布：手机淘宝摇一摇在哪编辑：程序博客网时间：2024/05/16 18:48

利用jquery+css实现导航栏：

js代码如下：

  $(document).ready(function(){       $(".levael2").hide();   var i = 1;       $(".level1 > a").click(function(){if(i%2==0){   $(this).removeClass("current")   .next().hide()   .parent().siblings().children("a").removeClass("current")   .next().hide();}else{$(this).addClass("current")   .next().show()   .parent().siblings().children("a").removeClass("current")   .next().hide(); }                                i++;   return false;        }); });

前台html代码如下：

<html><head><script src="jquery.js" type="text/javascript"></script><script src="test.js" type="text/javascript"></script><style type="text/css"> ul li {list-style:none;} </style></head><body>       <div class="box">     <ul class="menu">   <li class="level1">     <a href="">衬衫</a>   <ul class="levael2">     <li><a href=""> a</a></li> <li><a href="">b</a></li> <li><a href="">c</a></li>   </ul>   </li>   <li class="level1">     <a href="">卫衣</a>   <ul class="levael2">     <li><a href=""> a</a></li> <li><a href="">b</a></li> <li><a href="">c</a></li>   </ul>   </li> </ul>   </div></body></html>

0 0