CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rohit Mehra
Rohit Mehra

Reputation: 229

Change link to active onclick

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,

Upvotes: 2

Views: 9013

Answers (4)

DhruvJoshi
DhruvJoshi

Reputation: 17136

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

Upvotes: 3

Rakesh Kumar
Rakesh Kumar

Reputation: 2853

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

Upvotes: 1

Daan
Daan

Reputation: 2799

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

Upvotes: 1

drip
drip

Reputation: 12933

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.

Upvotes: 1

Related Questions