How To Change Color of Current Page Link - HTML / CSS / JavaScript

Question

I'm trying to follow this example.

I've loaded this script:

<script>

// current page highlight
    $(document).ready(function() {
    $("[href]").each(function() {
        if (this.href == window.location.href) {
            $(this).addClass("active");
            }
        });
    });

</script>

Into the <head> section for these files: index.html (the home page), about.html, and store.html

For this site. Services won't ever need to be highlighted, and Blog and My Account are currently dead links.

Then I added the corresponding class to my CSS:

.active {
color:#337ab7;
}

So when we're on Home (index.html), the Home link should be #337ab7, when we're on About (about.html), the About link should be #337ab7, and when we're on Store (store.html), the store link should be #337ab7.

But right now, still no result. What do I need to change about the JavaScript, CSS, or HTML to make this function apply?

Here's the HTML for the Nav Menu in question:

EDIT: Added active class to the links in question:

<nav class="navbar navbar-default">
<div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <div>
            <a class="navbar-brand" href="http://nowordpress.gatewaywebdesign.com/">
            <img src="assets/images/gatewaylogo.png">
            </a>
        </div>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="http://nowordpress.gatewaywebdesign.com/index.html" class="active">Home <span
                    class="sr-only">(current)</span></a></li>
            <li><a href="http://nowordpress.gatewaywebdesign.com/about.html" class="active">About</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                   aria-expanded="false">
                    Services
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="http://nowordpress.gatewaywebdesign.com/website-design.html">Website Design</a></li>
                    <li><a href="http://nowordpress.gatewaywebdesign.com/graphic-design.html">Graphic Design</a></li>
                    <li><a href="http://nowordpress.gatewaywebdesign.com/promotional-products.html">Promotional Products</a></li>
                    <li><a href="http://nowordpress.gatewaywebdesign.com/search-engine-marketing.html">Search Engine Marketing</a></li>
                    <li><a href="http://nowordpress.gatewaywebdesign.com/wordpress-conversion.html">WordPress Conversion</a></li>
                </ul>
            </li>
            <li><a href="/store.html" class="active">Store</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">My Account</a></li>
        </ul>

        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

And again here is the link for the live site. Thank you.

`$(this).addClass("active");` you have no `.active` class in CSS - did you mean `$(this).addClass("current-link");` — Jaromanda X, May 24 '17 at 14:50
if the url of that link is exactly the same as the one you are currently visiting you should go with `:target` and only in the edge case that they differ use something like .active as pseudo target — GottZ, May 24 '17 at 14:51
@JaromandaX sorry I changed "current-link" to "active" in the CSS above. It's `.active` in my code. — Chameleon, May 24 '17 at 14:52
Check your console. For some reason, you're not applying class `active` to any alement. — apires, May 24 '17 at 14:52
I don't see why you need any JavaScript. You're using static pages so just add the class to the current link. — Darkrum, May 24 '17 at 14:53
@doutriforce yeah it's giving me this error: http://i.imgur.com/C3d1KME.jpg How do I add the `active` to an element? You mean I should do this? `
@Darkrum but the current link is going to change based on what page we've navigated to, right? — Chameleon, May 24 '17 at 14:56
@Chameleon It doesn't matter your site is static just add the active class to the link. So if your in your about page just add active to that links classes in the html. — Darkrum, May 24 '17 at 14:59
@Darkrum I've added the `active` class to the links in question - see above edit - index.html, about.html, and store.html - still no result though. — Chameleon, May 24 '17 at 15:04
@Chameleon, change `.active` to `.navbar-default .navbar-nav > li > a.active` in your stylesheet. http://i.imgur.com/rp4bYSS.png — apires, May 24 '17 at 15:16
@Chameleon, dude, you put 2 dots on class name. http://i.imgur.com/c6DS3Oc.png — apires, May 24 '17 at 15:25
@doutriforce Oh my God - that's fixed now. Now if you refresh the page you'll be able to see the problem - all of the links that are given that class are highlighted. — Chameleon, May 24 '17 at 15:29
@Chameleon, okay, so only the current link should have `active` class. — apires, May 24 '17 at 15:31

apires · Answer 1 · 2022-05-17T08:08:46.490

2

Your .active class style is being overwritten by the class .navbar-default .navbar-nav > li > a.

You need to change the CSS selector, being more specific, from just .active to .navbar-default .navbar-nav > li > a .active.

About adding class active only to current accessed href. Try this:

$('ul.nav > li > a').each(function(){
   var url = window.location.href; //if comparing with full URL
   //var url = window.location.href.pathname; //if comparing with page name (ex. /about.html)
   var href = $(this).prop('href');

   if (url == href) {
     $(this).addClass('active');
   }
});

Or, as @Mohamed-Yousef answered, you can just write:

$("a[href*='"+ window.location.href +"']").addClass('active');

If you're always comparing full URL to full Href URL.

edited May 17 '22 at 08:08

answered May 24 '17 at 15:28

apires

917
1
9
18

Fixed but getting this error - also all links with the class `active` are highlighted. http://i.imgur.com/c70TJXu.jpg – Chameleon May 24 '17 at 15:32
(Replying to your comment here) Exactly - so how do I apply the `active` class to the current link? Also I can't chat without a reputation of 20 - please upvote if you'd rather help via chat. – Chameleon May 24 '17 at 15:34
Tried it, still no result. Thanks anyway. Will post answer when it's complete. – Chameleon May 24 '17 at 16:04

score 2 · Accepted Answer · answered May 25 '17 at 01:00

SOLUTION

For example, the store page:

HTML:

<li><a class="active" href="/store.html">Store</a></li>

CSS: (.navbar-default .navbar-nav > li > a was overriding the .active class, as mentioned by doutriforce)

.navbar-default .navbar-nav > li > a.active {
color: #337ab7;
}

.navbar-button:hover, a.active {
color: #337ab7;
transition: ease-in-out 0.3s;
}

JavaScript:

// current page highlight

   // link color code starts
    $(document).ready(function () {
        console.log("current page", window.location.href);
        $("[href]").each(function () {
            $('a[href]:not([href=#])').each(function () {

                if (window.location.href.indexOf($(this).attr('href')) > -1) {
                    console.log($(this).attr('href') +" is active ");
                    $(this).addClass('active');
                }
                else {
                    console.log($(this).attr('href') + "is not active ");
                }
            });
        });
    });
    // link color code ends

Then be sure to change which <a> link gets the active class based on which page is the active page in your file - i.e. if you're editing login.html, then your HTML will look like this:

<li><a href="/store.html">Store</a></li>
<li><a href="/blog.php">Blog</a></li>
<li><a class="active" href="/login.html">Login</a></li>

If you're editing blog.php, then your HTML will look like this:

<li><a href="/store.html">Store</a></li>
<li><a class="active" href="/blog.php">Blog</a></li>
<li><a href="/login.html">Login</a></li>

And so on.

Finally, in index.html (the home page), be sure to add a span with class sr-only after the link text, like this:

<li><a href="http://nowordpress.gatewaywebdesign.com/index.html">
Home <span class="sr-only">(current)</span></a></li>

To hide the (current) label with Bootstrap.

Mohamed-Yousef · Answer 3 · 2017-05-24T15:18:29.847

1

No need to use .each() you can just use a selector for this

<script>
// current page highlight
    $(document).ready(function() {
       $("a[href*='"+ window.location.href +"']").addClass('active');
    });
</script>

And if you need to know how a[href*='"+ window.location.href +"'] selector work it simply mean find a tag with href contains window.location.href if you change your href a to something like <a href="/website-design.html"> this selctor won't work .. if this is the case you need to use .each() and .indexOf()

<script>
// current page highlight
    $(document).ready(function() {
       $('a[href]:not([href=#])').each(function(){
            if(window.location.href.indexOf($(this).attr('href')) > -1){
               $(this).addClass('active');
            }
       });
    });
</script>

edited May 24 '17 at 15:18

answered May 24 '17 at 14:53

Mohamed-Yousef

23,946
3
19
28

no need to do that if there is `:target` but ye. this would most likely work. – GottZ May 24 '17 at 14:54
Okay I've changed that code for index.html, about.html, and store.html - still have `.active` style in my CSS, and have added the active class to the home, about, and store links in the HTML for all three files - still no result though. – Chameleon May 24 '17 at 15:10
All of the `href`s already have paths like that: `About` So what does the code look like with `.each()` and `.indexOf()`? – Chameleon May 24 '17 at 15:27

dgeare · Answer 4 · 2017-05-24T15:38:36.083

1

about.html:19 Uncaught SyntaxError: Invalid or unexpected token

there is some weird unicode in line 19 that is throwing a parser error. You can see it in chrome's inspector in the "foreach".

Cleaning that up might fix it.

edited May 24 '17 at 15:38

answered May 24 '17 at 14:54

dgeare

2,618
5
18
28

I'm not seeing any error in the console? line 19 for `about.html` is identical to line 19 on `store.html` and the corresponding line on `index.html` – Chameleon May 24 '17 at 15:07
it's gone now. As is the foreach. So presuming you didn't modify it between the post and now, because the code was definitely not the same as your post, I'd wonder if there is a caching/pre-rending mechanism in place. Which would be good for you to keep in mind as you develop. – dgeare May 24 '17 at 15:13
then just something to be aware of for the future. – dgeare May 24 '17 at 15:22

How To Change Color of Current Page Link - HTML / CSS / JavaScript

4 Answers4