0

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

<!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>

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

任何建议都会有很大帮助

谢谢大家，

4

2 回答 2

1

使用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-17T16:55:12.193 回答
1

我认为你应该使用

 <a href="#">

在你的 html 中。

[编辑] 请查看href vs. onclick 中的 JavaScript 函数以获取更多详细信息和更好的解决方案

于 2013-04-17T17:10:39.390 回答