Jquery选项卡显示子菜单点击事件

我有包含子菜单的选项卡。目前sbu菜单显示在悬停事件中，但我希望它在click事件中显示。当我添加点击事件时，它不起作用。我发现，每当用户点击主菜单页面时都会刷新。这里是代码Jquery选项卡显示子菜单点击事件

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <title>jQuery Tabbed Navigation</title> 

     <style type="text/css"> 
     * {margin:0;padding:0;} 
     body { 
      font-family: Georgia,serif; 
      font-size:11px; 
      line-height:18px; 
      background-color:#f0f0f0; 
     } 
     a { 
      color:#333; 
      text-decoration:none; 
     } 
     #header { 
      float:left; 
      width:100%; 
      height:139px; 

      border-bottom:1px solid #4A7A97; 
     } 
     .menu { 
      margin:75px auto 0; 
      width:900px; 
      position:relative; 
      text-align: center; 
     } 
     #main_nav li { 
      text-align:left; 
      list-style:none; 
      display:block; 
      float:left; 
     } 
     #main_nav li a { 
      background:#3D362D; 
      padding:9px 12px; 
      position:relative; 
      color:#f4f4f4; 
      text-transform: uppercase; 
     } 
     #main_nav li a.active, #main_nav .sub_nav li a { 
      background:#578FB2; 
      border-bottom: 1px solid #578FB2; 
     } 
     .sub_nav { 
      display:none; 
      text-align:left; 
      position:absolute; 
      top:35px; 
      left:0px; 
     } 
     #main_nav .sub_nav li a:hover { 
      text-decoration: underline; 
     } 
     </style> 

     <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> 
     <script type="text/javascript"> 
     $(document).ready(function(){ 
      $("#main_nav li a.main").click(function(){ 

       $("#main_nav li a.main").removeClass("active"); 
       $(this).addClass("active"); 
       $(this).queue(function() {      
        $(".sub_nav").fadeOut(); 
        $(this).siblings(".sub_nav").fadeIn(); 
        $(this).dequeue(); 
       }); 
      }); 
     }); 
     </script> 

    </head> 
    <body> 

     <div id="wrapper"> 

      <div id="header"> 

       <div class="menu"> 
        <ul id="main_nav"> 
         <li><a href="" class="main">Home</a> 
          <ul class="sub_nav"> 
           <li><a href="">SEO</a></li> 
           <li><a href="">WordPress</a></li> 
           <li><a href="">Rants</a></li> 
          </ul> 
         </li> 
         <li><a href="" class="main">Company</a> 
          <ul class="sub_nav"> 
           <li><a href="">Browser Add-ons</a></li> 
           <li><a href="">Plug-ins</a></li> 
           <li><a href="">WordPress</a></li> 
          </ul> 
         </li> 
         <li><a href="" class="main">Clients</a> 
          <ul class="sub_nav"> 
           <li><a href="">SEO Services</a></li> 
           <li><a href="">Web Analytics</a></li> 
          </ul> 
         </li> 
        </ul> 
       </div> 

      </div> 

     </div> 

    </body> 
</html>

我已经从其他博客上面的代码复制。

任何意见将是一个很大的帮助

感谢所有，

来源

2013-04-17 niran

使用e.preventDefault()：

 $(document).ready(function(){ 
      $("#main_nav li a.main").click(function(e){ 
       e.preventDefault();     
       $("#main_nav li a.main").removeClass("active"); 
       $(this).addClass("active"); 
       $(this).queue(function() {      
        $(".sub_nav").fadeOut(); 
        $(this).siblings(".sub_nav").fadeIn(); 
        $(this).dequeue(); 
       }); 
      }); 
     });

来源

2013-04-17 16:55:12

为什么了preventDefault，我不能，如果它工作在徘徊，为什么不就在click事件 – niran

e.preventDefault正在了解（）阻止绑定事件的默认行为。在这里你点击一个链接（），默认情况下重定向你到给定的网址（attr href，甚至是空的）。在悬停事件的链接标记上没有默认行为，因此不需要悬停来防止默认行为。 –