Manuel Stoilov Manuel Stoilov - 2 months ago 5
CSS Question

Function to add class to page user is currently on

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

jQuery active link 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");
}
})
})

Answer

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