Add class active when clicking the menu link with Jquery

Question

I have HTML

<div id="top" class="shadow">
  <ul class="gprc"> 
    <li><a href="http://www.domain.com/">Home</a></li> 
    <li><a href="http://www.domain.com/link1/">Text1</a></li> 
    <li><a href="http://www.domain.com/link2/">Text2</a></li> 
    <li><a href="http://www.domain.com/link3/">Text3</a></li> 
    <li><a href="http://www.domain.com/link4">Text4</a></li> 
  </ul> 
</div>

and JQUERY

$(function () {
    var url = window.location.pathname,
        urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
    $('#top a').each(function () {
        if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
            $(this).addClass('active');
        }
    });    
});

The problem is that when i click on the Home link all tabs are getting active class and don't understand why. I need it for the first link to not get any active class.

Why using each() loop? this can be easily achieved on click() — Dhaval Marthak
– Dhaval Marthak, Commented Oct 28, 2013 at 15:53

Pedz · Accepted Answer · 2018-11-08 06:08:08Z

3

I'm also looking for this solution and I have tested your code. On the first approach all links are highlighted and when I click other links it is working properly. The problem was on the home page because all links are highlighted because there is "no event been received" when the page is loaded, the code will work if you send a command or by clicking each links, theoretically. To stop this behavior, I found this code to one of the answers above, add this code and change the ".sibling()" to ".previousSibling()"

$(this).parent().sibling().find('a').removeClass('active');

".sibling()" will highlighted at the end of your links change it to ".previousSibling()" so it will go to first (Li)

$(this).parent().previoussibling().find('a').removeClass('active');

Your code will be like this:

    $(function () {
    var url = window.location.pathname,
        urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
    $('#top a').each(function () {
        if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
            $(this).addClass('active');
            $(this).parent().previoussibling().find('a').removeClass('active');
        }
    });    
});

edited Nov 8, 2018 at 6:08

Pedz

4781 gold badge12 silver badges30 bronze badges

answered May 9, 2015 at 16:33

Dennis Castillo

463 bronze badges

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

1 Comment

David Thomas Over a year ago

Reading this answer I'm assuming that English isn't your first language? Could you, please, re-read this answer and break it up into paragraphs and sentences, in order to make it more understandable. Incidentally "bcoz" should be "because." As for your salutation, "Thanks and God Bless" - please remove that, it's irrelevant to your answer (as are "hello," signatures, and many other things). While I respect your intent, it's out of place here. I was going to edit myself, to try and improve, but I struggled to work out what you were trying to say.

Bharath R · Accepted Answer · 2013-10-28 15:58:16Z

3

Check this , this will only activates clicked tab , remove active for all and then add for the one clicked

$("#top a").click(function() {
    $('a').removeClass('active');
    $(this).addClass("active");
});

Check this

answered Oct 28, 2013 at 15:58

Bharath R

1,5161 gold badge12 silver badges23 bronze badges

6 Comments

Adrian Over a year ago

Don't know why it's doing nothing.

Adrian Over a year ago

I added on href="1" jsfiddle.net/rLddf/9. If you click it you will see that on page load tab won't remain active.

Adrian Over a year ago

When i click on home, after the page loads this single tab should be inactive (removeClass('active');). When i click on the rest of the links, let's say second link for example, link should get active and remain active after page load or refresh.

Adrian Over a year ago

checkprg.com This is my site, when i click now, the links are not working anymore. Have a look.

Bharath R Over a year ago

Have you checked the fiddle yet?

|

Bhavesh Odedra · Accepted Answer · 2015-01-08 07:23:30Z

1

You may try this out. It will help you:

<script type="text/javascript">
    $(function () {
        $('#sidebar li a').each(function () {
            var path = window.location.pathname;
            if (path.indexOf('?') > 0) {
                var current = path.indexOf('?');
            }
            else {
                var current = path;
            }
            var url = $(this).attr('href');
            var currenturl = url.substring(url.lastIndexOf('.') + 1);
            if (currenturl.toLowerCase() == current.toLowerCase()) {
                $(this).addClass('active');
                var par = $(this).parent();
                par.addClass('open');
            }
        });
    });
</script>

edited Jan 8, 2015 at 7:23

Bhavesh Odedra

11.2k12 gold badges37 silver badges58 bronze badges

answered Jan 8, 2015 at 6:52

Manisha Agarwal

1011 gold badge3 silver badges10 bronze badges

1 Comment

Nathan Tuggy Over a year ago

Generally, answers are much more helpful if they include an explanation of what the code is intended to do, and why that solves the problem without introducing others.

Scott Rowell · Accepted Answer · 2013-10-28 16:37:43Z

0

You're running a foreach loop on all <a> tags within your #top div. So of course it'll add the class active to all of them.

I think what you're trying to do is this: http://jsfiddle.net/rLddf/4/

I used the click event instead.

edit switched link to Kristof Feys example - more efficient.

edited Oct 28, 2013 at 16:37

answered Oct 28, 2013 at 15:54

Scott Rowell

1,1306 silver badges8 bronze badges

2 Comments

Adrian Over a year ago

I need it to get active only the tab that i clicked, not after i click each link to get colored.

Adrian Over a year ago

@ScottRowell doesn't work for me, i have tried with jquer 1.9.1, 1.10.1, 1.10.2

user7270348 · Accepted Answer · 2016-12-09 00:32:32Z

0

try this...

$(function() { 
    $('#yourMenu a').each(function(){
        $current = location.href;
        $target= $(this).attr('href');
            if ( $target== $current) 
            {
                $(this).addClass('active');
            }
    });
});

answered Dec 9, 2016 at 0:32

user7270348

1

Comments

Pedz · Accepted Answer · 2018-11-08 04:57:39Z

0

I came across the same issue and I found it easier to just add an additional if statement so that the function would fire on all pages except the home page which met my needs.

$(function(){
    var url = window.location.pathname, 
        urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");         
        $('#top a').each(function(){
          if ( window.location.pathname != '/' ){
            if(urlRegExp.test(this.href.replace(/\/$/,''))){
                  $(this).addClass('active');
              } 
            }             
        });
 });

You could also add in an else statement to show an active link on the homepage by targeting the link directly if required.

answered Nov 8, 2018 at 4:57

Pedz

4781 gold badge12 silver badges30 bronze badges

Comments

Dhaval Marthak · Accepted Answer · 2013-10-28 16:00:42Z

-1

I think you need something like this:

$(function () {
    $("#top a").click(function(e){
        e.preventDefault();
        $(this).addClass('active');
        $(this).parent().siblings().find('a').removeClass('active');
    });
});

Fiddle Demo

answered Oct 28, 2013 at 16:00

Dhaval Marthak

17.4k6 gold badges48 silver badges69 bronze badges

3 Comments

Adrian Over a year ago

this works, but doesn't go through the link. I mean when i click it, it only remains selected the link i click but doesn't access the link.

Kristof Feys Over a year ago

to go through the link, just remove the line "e.preventDefault();"

Adrian Over a year ago

@KristofFeys now goes through the link but it doesn't remain selected after.

Collectives™ on Stack Overflow

Add class active when clicking the menu link with Jquery

7 Answers 7

1 Comment

6 Comments

1 Comment

2 Comments

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

6 Comments

1 Comment

2 Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related