(html/css/javascript) Trying to make my Current Page link in the navbar a different color

Question

I've been reading around and people recommending only CSS to change the current page navbar link background color but I don't get how that's possible since CSS is static and I won't be able to add/remove the .currentlink class on the links? So right now I'm using JS / jquery to try to add / remove class based on click, but the site refreshes and nothing is saved when I click, so that the class that I added/removed doesn't do anything. May someone guide me the right direction? Example: I click on the last link of the HTML I gave you, but it would just go to that site and since everything refreshes to a new site, the background doesn't change.

HTML

    <nav class="clearfix">

        <a href="#">home</a> 
        <a href="#">about us</a> 
        <a href="#">tour</a>
        <a href="index.html">flickr search</a>

    <div class="rightnav">
        <a href="#">Sign Up</a>
        <a href="#">Log In</a>
    </div>

    </nav>

CSS

.greybackground {
background: #E6E6E6;
}

JS

$('nav a').on('click', function(){
    $('nav a').removeClass('greybackground');
    $(this).addClass('greybackground');
});

so the only way is to add the class to the corresponding link in each of my pages? — bigpotato
– bigpotato, Commented Sep 4, 2012 at 0:38
It is not the only way... but the simplest (and generally most reliable way), yes. — ahren
– ahren, Commented Sep 4, 2012 at 0:39
Ahren is correct. However, -if- you're going to do javascript, you could either match the URL to link after the page loads, or store the most recently clicked link href in a cookie and match it to your navigation. — Mike Robinson
– Mike Robinson, Commented Sep 4, 2012 at 2:42

Pranjal Koshti · Accepted Answer · 2017-10-29 10:35:24Z

1

If you are creating multi page website and want to change link color on each page, simply create a class with specific css properties and add this class to respective navbar link on each page. Make sure that on any page, class must be added to only respective page link.

Any if you are looking solution for single page website following code will work just fine

Here is html css code for simple navigation bar

<h1>navbar</h1>
   <li><a href="#" class="link">Home</a></li>
   <li><a href="#" class="link">Products</a></li>
   <li><a href="#" class="link">About us</a></li>
   <li><a href="#" class="link">Contact</a></li>
   <button>Log in</button>
 </ul>

a{
 background-color:black;
 padding:10px;
 text-decoration:none;
 color:white;
}

li{
 margin:30px;
 display:inline;
 }

ul{
 list-style-type: none;
 }

.transform{
 background-color:red;
 }

 button{
  background-color:green;
  padding:10px;
  color:white;
}

This is javascript to change bg color of active link

 $("a.link").click(function(){
  $("a.link").css("background-color", "black");
  $(this).css("background-color", "red");
 });

Simply add class '.link' for every navbar link and when user clicks on any navbar link css property ad applied to that link and all other links will change their bg color to none. I hope it helps

https://codepen.io/pranjalkoshti/pen/GMarvj

edited Oct 29, 2017 at 10:35

answered Oct 29, 2017 at 8:38

Pranjal Koshti

1852 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anton Hlinisty Over a year ago

May any explanation be added?

Pat Dobson · Accepted Answer · 2017-10-29 08:58:27Z

The easiest way to achieve this is identify an element that

Is present on every page
You can add markup to

For example, a div for your overall content.

If you add the following to the div :

<div id="content" data-currentpage="about">

This will identify the page uniquely.

and for each menu item add a class that matches:

<li><a href="#" class="link" class="home">Home</a></li>
<li><a href="#" class="link" class="products">Products</a></li>
<li><a href="#" class="link" class="about">About us</a></li>
<li><a href="#" class="link" class="contact">Contact</a></li>

So, on page ready ( jQuery(document).ready(function(){...) run the following code:

// -- Find the pages 'data' tag --
var currentPage = jQuery('#content').data('currentPage');
// -- Add a dot to turn it into a class identifier --
currentPage = '.' + currentPage;
// -- Add a background class to to the menu item with that class --
jQuery(currentPage).addClass('greybackground');

This will 'match' each page (via the data-currentpage tag) to the corresponding menu item and add your background class to that menu item.

Patrik · Accepted Answer · 2020-07-02 11:52:43Z

0

Solution in vanilla JS (HTML, CSS).

Navbar items need to be in class .navlinks

Add styling under the class current-link.

<html>
    <nav>
        <ul>
            <li class="navlinks"></li>
            <li class="navlinks"></li>
        </ul>
    </nav>
</html>

<style>
.current-link {
      background-color: red;
}
</style>

<script>
  let links = document.getElementsByClassName("navlinks");
  for(let i = 0;i < links.length;i++){
    if (links[i].href.replace(/\/$/, '') == ocument.URL.replace(/\/$/, '')){
      links[i].classList.add("current-link");
    }
  }
</script>

answered Jul 2, 2020 at 11:52

Patrik

1171 gold badge1 silver badge7 bronze badges

Collectives™ on Stack Overflow

(html/css/javascript) Trying to make my Current Page link in the navbar a different color

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related