Change link to active onclick

Question

I have a common header for all of the pages I have in my site.

When I click on any link it takes me to that page and the page gets refreshed.

But the header is the same as it was in the previous page.

What I want is that when I click on any link, that link gets bold(Active) and if I am on homepage the home link should be active by default.

I am trying to work on this and when I click on any link the link gets active(bold) but as the page gets refresh and take me to the new page the link comes to non active(normal).

Here is my code.

<script type='text/javascript'>
$(window).load(function(){
$("#main-menu a").click(function() {
    $('a').removeClass('active');
    $(this).addClass("active");
});
});>  
</script>
<style>
.active {font-weight:bold}
</style>
<!--Navigation-->
    <nav id="main-menu">
        <ul class="right">
        <li><a href="#">Home</a></li>                                    
        <li><a href="#">Test Link 1</a></li>
        <li><a href="#">Test Link 2</a></li>
        <li><a href="#">Test Link 3</a></li>
    </ul>
      </nav>

Is there any way we can do it with the common header? Thanks,

Dublicate question http://stackoverflow.com/questions/14476591/active-state-on-nav-after-page-refresh — Rakesh Kumar, Feb 20 '14 at 09:56
Please let me know if my answer worked for you or if you have any issues with the answer. Please accept my reply as correct answer if it worked for you- so that other users can benefit: from knowing that the answer works and by having the question marked as Answered. — DhruvJoshi, Feb 20 '14 at 15:25

DhruvJoshi · Accepted Answer · 2014-02-25T09:06:46.437

3

What you want to do is to pass values(state) between two pages via navigation. The best way to apply .active to your current page is by checking what page you are on and then applying class via jquery

The window.location.pathname allows for path after the domain example if your site page is www.my.example.com/page1 then it gives path1 Watch out for complicated cases like www.my.example.com/category/page1 then it gives category/path1

A code like this would work. Also see fiddle link here http://jsfiddle.net/52Aqu/10/

$(window).load(function(){
   var checkvalue= window.location.pathname;
   //alert(checkvalue);
   $("a").each(function(){
                        if($(this).attr('href')== checkvalue)
                         { $(this).addClass("active");}
                         });

                    });

For you case when you actually want to check against the query parameter in url and query parameter in href,try this code:

$(window).load(function(){
   var checkvalue= window.location.search;
   //alert(checkvalue);
   $("a").each(function(){
                        var hrefvalue="?" + $(this).attr('href').split("?")[1];
                       //alert(hrefvalue)
            if(hrefvalue== checkvalue) { $(this).addClass("active");}
                         });
                    });

Here location.search property provides query parameters from URL. Example if page url is www.example.com/sites/statics/static_page.html?name=global/canada/index the location.search will have value ?name=global/canada/index

and we check this against the split value from href

edited Feb 25 '14 at 09:06

answered Feb 20 '14 at 09:56

DhruvJoshi

17,041
6
41
60

Hi DhruvJoshi, Thank you for taking effort to fixing my issue. Your code is very helpful. I need your help to implement this. But Coz linking i guess its not working for me. I have linked my url like this . So when I run my page and click on any link it just take teh path till /site/statics/static_page.html. – – Rohit Mehra Feb 24 '14 at 16:28
Thank you so much bhai. My issue is resolved. :)You are a genius. – Rohit Mehra Feb 25 '14 at 11:46
Can you please see my one issue getting on this. If I click on any other link while being on the same page my header links get non-active but when I am clicking on any header link eg:- Test Link 1, Test Link 2, Test Link 3 Its working perfectly fine. Thanks – Rohit Mehra Feb 26 '14 at 09:54
Like these I have a link on the left side on my page. – Rohit Mehra Feb 27 '14 at 08:07
@RohitMehra the code i've given in answer will work through all links on page for checking. So if you click on a side link the page will reload with new url as something like `www.example.com/sites/statics/static_page.html?name=global/canada/primary-oem-p‌artnerships` and now if this link is present anywhere on page it will be matched and get the `active` CSS class. Note that in this case no header will match the new path and hence will not get CSS class. Now **do you want to** add some rule that if the file path does not match any header links, by default some header should be `active` – DhruvJoshi Feb 27 '14 at 21:03
Ok, no Thanks its fine for now.:) – Rohit Mehra Mar 03 '14 at 15:06
worked, if using Jquery 1.8 and above, check the solution with the most votes on this answer as well. https://stackoverflow.com/questions/38871753/uncaught-typeerror-a-indexof-is-not-a-function-error-when-opening-new-foundat – Winter MC Jan 05 '23 at 16:50

score 1 · Answer 2 · answered Feb 20 '14 at 09:57

You can check for example the window.location.pathname an compare it to the href of the navigation. Meaning:

var pathName = window.location.pathname;

$('nav a').each(function() {
    var $self = $(this);
    if($self.attr('href') ==pathName){
        $self.addClass('active');
    }
})

Something like that.

score 1 · Answer 3 · answered Feb 20 '14 at 09:57

You should not remove the class active of a but of .active. Basically this clears all the classes .active so that you can set it to the currently clicked link.

Script would look like:

<script type='text/javascript'>
$(window).load(function(){
$("#main-menu a").click(function() {
    $('.active').removeClass('active');
    $(this).addClass("active");
});
});>  
</script>
<style>
.active {font-weight:bold}
</style>
<!--Navigation-->
    <nav id="main-menu">
        <ul class="right">
        <li><a href="#">Home</a></li>                                    
        <li><a href="#">Test Link 1</a></li>
        <li><a href="#">Test Link 2</a></li>
        <li><a href="#">Test Link 3</a></li>
    </ul>
</nav>

JSFiddle Demo

score 1 · Answer 4 · answered Feb 20 '14 at 10:07

I Think this code can help you.

var url = document.location.href;  // Getting the url
var str = url.substr(0, url.lastIndexOf('/')); // get the specific url
var nUrl = url.substr(url.lastIndexOf('/')+1); // Get the page name from url

$('#menu li a').each(function(){
    if( $(this).attr('href') === nUrl){ // Comparing if we on the same page or not
        $(this).addClass('active'); // applying the class on the active page
    };
});

Change link to active onclick

4 Answers4