CODEWITHSUNDEEP
javascripthtml
Adrian
Adrian

Reputation: 2291

Add class active when clicking the menu link with Jquery

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.

Upvotes: 2

Views: 22225

Answers (7)

Dennis Castillo
Dennis Castillo

Reputation: 46

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');
        }
    });    
});

Upvotes: 3

Pedz
Pedz

Reputation: 478

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.

Upvotes: 0

user7270348
user7270348

Reputation: 1

try this...

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

Upvotes: 0

Manisha Agarwal
Manisha Agarwal

Reputation: 101

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>

Upvotes: 1

Scott Rowell
Scott Rowell

Reputation: 1130

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.

Upvotes: 0

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

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

Upvotes: -1

Bharath R
Bharath R

Reputation: 1531

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

Upvotes: 3

Related Questions