Function to add class to page user is currently on

Question

similar questions have already been answered, but I'm having trouble implementing them in my own code:

Add active class to current page navigation link

Dynamically change CSS of link based on current page

Basically, I'm trying to figure out how to add a class to an anchor tag if the anchor tag matches the current page the user is on. I have three html pages - Index, About, and Contact. They all have the same navbar.

-----------------------------------Index.html----------------------------------------------------------------------

 <nav class="navbar navbar-inverse navbar-fixed-top"><!-- navbar begings -->
    <div class="container">
        <div class="navbar-header">
            <button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-nav-demo" data-toggle="collapse" type="button">
                <span class="sr-only">Toggle navigation</span>
            </button>
            <a class="navbar-brand" href="http://vetamuse.com">Manuel Stoilov</a>
        </div>

        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a class="navAnchor" href="about.html">About |</a></li>
                <li><a class="navAnchor" href="contact.html">Contact |</a></li>
            </ul>
        </div>
    </div>
</nav>

-----------------------------------About.html----------------------------------------------------------------------

 <nav class="navbar navbar-inverse navbar-fixed-top"><!-- navbar begings -->
    <div class="container">
        <div class="navbar-header">
            <button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-nav-demo" data-toggle="collapse" type="button">
                <span class="sr-only">Toggle navigation</span>
            </button>
            <a class="navbar-brand" href="http://vetamuse.com">Manuel Stoilov</a>
        </div>

        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a class="navAnchor" href="about.html">About |</a></li>
                <li><a class="navAnchor" href="contact.html">Contact |</a></li>
            </ul>
        </div>
    </div>
</nav>

-----------------------------------Contact.html----------------------------------------------------------------------

 <nav class="navbar navbar-inverse navbar-fixed-top"><!-- navbar begings -->
    <div class="container">
        <div class="navbar-header">
            <button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-nav-demo" data-toggle="collapse" type="button">
                <span class="sr-only">Toggle navigation</span>
            </button>
            <a class="navbar-brand" href="http://vetamuse.com">Manuel Stoilov</a>
        </div>

        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a class="navAnchor" href="about.html">About |</a></li>
                <li><a class="navAnchor" href="contact.html">Contact |</a></li>
            </ul>
        </div>
    </div>
</nav>

In my css, my .navAnchors are syled. I want to also add class .current to the anchor tag that matches the page the user is currently on.

----------------------------------index.css-----------------------------------

  .navbar-collapse > .nav > li > a:link, 
  .navbar-collapse > .nav > li > a:visited
{ 
    color: #95a1aa;
    font-size: 15px;
}

.current {
  color: pink;
}

I'm currently trying this function in JavaScript, but it's not working:

------------------------index.js-----------------------

var path = window.location.pathname.split("/").pop();
var link = $(".navAnchor");

window.setInterval(function(){
  for(var i = 0; i < 2; i++) {  //2 refers to the number of links on nav page (about and contact)
    if(path === link.eq(i).attr('href')){
        link.eq(i).addClass("current");   
    }
   }
}, 5000);

The links for the pages are: (index.html) https://preview.c9users.io/manistoi/vetamuse/vetamuse/v3/index.html?_c9_id=livepreview8&_c9_host=https://ide.c9.io

(about.html) https://preview.c9users.io/manistoi/vetamuse/vetamuse/v3/about.html

(contact.html) https://preview.c9users.io/manistoi/vetamuse/vetamuse/v3/contact.html Any help or tips are appreciated!!

--------------------------------------EDIT---------------------------------------------

The following works for me (in my javascript tab)

$(document).ready(function(){
  var path = window.location.pathname.split("/").pop();

  $(".navAnchor").each(function(){
    if($(this).attr('href') == path){
      $(this).css("color", "black");
      $(this).css("font-weight", "bold");
    }
  })
})

Your problem could be stemming from when your `link` variable is set, so without more information (i.e. an [mcve]) it's going to be difficult to diagnose the issue. — Tibrogargan, Sep 17 '16 at 23:52
That helps somewhat. Issues like this can be caused by setting variables before the DOM is loaded - and there wasn't enough context to determine if that was a factor. Links to external sites can also cause issues, so it's better to include enough context to reproduce the problem. You didn't really need all 3 pages - one would have been better. — Tibrogargan, Sep 18 '16 at 00:05
If the code given in the "EDIT" portion of your question works, then what is the question? If the code given is an answer, do not add an answer to the question. Instead, if you want, add it as a separate answer. — , Sep 18 '16 at 16:08

score 1 · Accepted Answer · edited Sep 18 '16 at 16:09

1

You want the current class to be on the li - not the a. Iterate over your navlink a's and check the href and if it matches your path variable - add the current class to the a's parent (the li). However - if you decide you want the Current class on the a - just ingnore the parent() in the code and it should work fine. Also - just noted that you have the pages titled with capital letters- but your hrefs are lowercase - eg: About.html vs about.html. These will need to be the same case.

$(document).ready(function(){
  var path = window.location.pathname.split("/").pop();

  $(".navAnchor").each(function(){
    if($this).attr('href') == path){
      $(this).parent().addClass('current');
    }
  })
})

edited Sep 18 '16 at 16:09

answered Sep 17 '16 at 23:56

gavgrif

15,194
2
25
27

Thanks for your help! Only thing wrong with your text is that you missed a ( [see my edit]. Also, the class for me wasn't working, so I just styled it using .css() instead [again, see my edit]. – Manuel Stoilov Sep 18 '16 at 14:24
1

glad to be of help - sorry for the typo - issue with typing things out and not testing it. Re - your edit - glad the code worked for you -but would still suggest putting those CSS rules onto a class and adding that to the element (looks like you are sticking with styling the . Its always better to apply a class than apply direct styling to the element. But glad its working :) – gavgrif Sep 18 '16 at 14:49

Function to add class to page user is currently on

1 Answers1