javascript - Change link to active onclick - Stack Overflow

admin管理员组

文章数量:1327582

I have a mon 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 es 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 mon header? Thanks,

I have a mon 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 es 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 mon header? Thanks,

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Nov 25, 2015 at 1:21 Josh Crozier 241k5656 gold badges400400 silver badges313313 bronze badges asked Feb 20, 2014 at 9:49 Rohit MehraRohit Mehra 22944 silver badges1515 bronze badges 3

• What server side language are you using? – Pattle Commented Feb 20, 2014 at 9:54
• Dublicate question stackoverflow./questions/14476591/… – Rakesh Kumar Commented Feb 20, 2014 at 9: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 Commented Feb 20, 2014 at 15:25

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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./page1 then it gives path1 Watch out for plicated cases like www.my.example./category/page1 then it gives category/path1

A code like this would work. Also see fiddle link here http://jsfiddle/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./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

You can check for example the window.location.pathname an pare 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.

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

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

本文标签： javascriptChange link to active onclickStack Overflow