Jquery tab showing submenu on click event

Question

I have tab which contains sub menu. Currently sbu menu are shown in hover event, but i want it show it in click event. When I have added click event it is not working. I found that whenever user click on the main menu page is refreshing. Here is the code

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

I have copied above code from some other blog.

Any advice would be a great help

Thanks all,

score 1 · Accepted Answer · answered Apr 17 '13 at 16:55

1

Use 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();
               });
           });
       });

answered Apr 17 '13 at 16:55

A. Wolff

74,033
9
94
155

why preventDefault, I could not understand if it is working in hover, why not it is working in click event – niran Apr 17 '13 at 17:11
e.preventDefault() prevent default behaviour of binded event. Here you are clicking on a link () wich by default redirect you to the given url (attr href, even it is empty). There is no default behaviour on link tag for hover event, so no need for hover to prevent default behaviour. – A. Wolff Apr 17 '13 at 17:13
Now I am facing one issue in this code, when i click on sub menu it is going off, it should stay when user click on it. any idea – niran Apr 18 '13 at 03:13

score 1 · Answer 2 · edited May 23 '17 at 12:28

1

I think you should use

 <a href="#">

in your html.

[edit] Please have a look to JavaScript function in href vs. onclick for more details and even better solution

edited May 23 '17 at 12:28

Community

1
1

answered Apr 17 '13 at 17:10

hr_117

9,589
1
18
23

Jquery tab showing submenu on click event

2 Answers2