Active link in menu with jQuery is not functioning

Question

I have the following code in jQuery for adding class active to links in nav menu- jQuery

$('.main__menu li a').click(function(e){
        
        $('.main__menu li a').removeClass("active");
        $(this).addClass("active");
        e.preventDefault();
    });

but is not functioning, the code is adding active class but is not changing the html pages when clicking on a links because of e.preventDefault();

Has someone working code for this?

If you need to redirect the page after clicking the link, then amending the class before the redirection is redundant. You instead need to set the class on the a element relevant to the current page when the page itself is loaded. — Rory McCrossan
– Rory McCrossan, Commented Oct 14, 2020 at 8:59
@RoryMcCrossan have you a working example, also when I set e.preventDefault(); at the top of inside of this function is not functioning. — Ivana
– Ivana, Commented Oct 14, 2020 at 9:04
@AlirezaMadad I did not downvote you. However I would have if I'd seen your answer that you deleted as it does not address the problem — Rory McCrossan
– Rory McCrossan, Commented Oct 14, 2020 at 9:23
@Ivana you need to follow a pattern similar to this: stackoverflow.com/q/16327080/519413 - assuming you can't do it server side, which would be a better solution. — Rory McCrossan
– Rory McCrossan, Commented Oct 14, 2020 at 9:24
@RoryMcCrossan thanks, I am not doing it on server side because it is a simple web site with no backend language. — Ivana
– Ivana, Commented Oct 14, 2020 at 9:29

Vijith · Accepted Answer · 2020-10-14 10:34:18Z

0

Add Style of hyper link

<style>
    .main__menu li a {
        background-color: #cccccc;
        border: 1px solid black;
    }
    .main__menu li a.active {
        background-color: #ffffff;
        border: 1px solid black;
    }
</style>

Html Code of Menu Item

<nav class="main__menu">
    <ul>
        <li><a href="" class="active">First Menu</a></li>
        <li><a href="">Second Menu</a></li>
        <li><a href="">Third Menu</a></li>
        <li><a href="">Fourth Menu</a></li>
    </ul>
</nav>

Jquery Code of Click event

    
$('.main__menu > ul > li > a').click(function(e){   

        $('.main__menu > ul > li > a').removeClass("active");
        $(this).addClass("active");
        e.preventDefault();  
       
});

______________________________________________________

*note : jQuery code is using parent child relation ship of html element.

answered Oct 14, 2020 at 10:34

Vijith

12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ivana Over a year ago

Sorry is not functioning this.

Vijith Over a year ago

Please check Below file github.com/VijithP/SOQuestion/blob/main/menu.html

Ivana · Accepted Answer · 2020-10-14 12:03:18Z

0

The working code:

first add active class to index.html in html code:

    <li><a class="active" href="index.html">Homepage</a>

And Jquery code:

    var current_location = window.location.href.split('/'); // ['http:', '', '', 'domain.com', 'page.html']
    var page;
    page = current_location[current_location.length - 1];

    $('.main__menu li a').removeClass('active');
    $('.main__menu li a').each(function(){
        var link =  $(this).attr('href');

        if (page === link){
            $(this).addClass('active');
        }
    });

@RoryMcCrossan thanks for adding hints! :)

answered Oct 14, 2020 at 12:03

Ivana

8322 gold badges16 silver badges33 bronze badges

Collectives™ on Stack Overflow

Active link in menu with jQuery is not functioning

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related