活动类别附加在 <li> jQuery不适用于页面加载

Question

I have set an active class on a dynamically created Wordpress navigational menu using this Jquery:

$(document).ready(function () {
$('.left-nav ul > li').click(function (e) {
    e.preventDefault();
    $('.left-nav ul > li').removeClass('active');
    $(this).addClass('active');
});
});

CSS:

.left-nav ul li a {
  color:#4D9120;
  display:block;
}
.left-nav ul li:hover a {
  color:#fff;
}
.left-nav ul li:hover {
  background:#4D9120;
}
.left-nav .active{
    background-color:#FF0000 !important;
}
.left-nav .active a{
    color:#fff !important;
}

HTML/PHP

<ul>
<?php wp_nav_menu(array('theme_location'=>'sidemenu','container'=>'','menu_id' => '','fallback_cb'=> false)); ?> 

</ul>

This is the HTML final output which are generated dynamically:

<div class="col-xs-3 left-nav">
            <ul>
                <li><a href="#">Tutoring</a></li>
                <li><a href="#">Consultancy</a></li>
                <li><a href="#">Summer Camp/School</a></li>
                <li><a href="#">University Applications</a></li>
                <li><a href="#">Job Placements & Intenships</a></li>
            </ul>

        </div>

The active class is applied on clicking on any of the menu link but pages don't load. But when I removed e.preventDefault(); the pages load but the active class is not applied anymore.

I would have loved to paste the website url but I'm currently working on a local server. Any help would be appreciated.

Answer 1

The current-menu-item class should be added to the active menu item by wp_nav_menu automatically. Get rid of the Javascript, and try adding this to your CSS:

.left-nav ul li.current-menu-item { background-color:#FF0000 !important; }
.left-nav ul li.current-menu-item a { color:#fff !important; }

See the documentation here .

Answer 2

here what is happening -

• when you use "e.preventDefault();" for click event of a link you are actually stopping it from carrying out its default task which is - "loading a link on clicking",yet the javascript is carried out so your "active class" is applied on clicking but the link doesn't work and page doesn't load.
• when you remove "e.preventDefault(); the link does work it loads the page its linked to but active class won't be applied because its totally a new page which is loaded which has nothing to do with javascript on your previous page from where it is loaded"..

hope this helps in solving your problem..