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
– Jaromanda X, Commented May 24, 2017 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
– GottZ, Commented May 24, 2017 at 14:51
@JaromandaX sorry I changed "current-link" to "active" in the CSS above. It's .active in my code. — Chameleon
– Chameleon, Commented May 24, 2017 at 14:52
Check your console. For some reason, you're not applying class active to any alement. — apires
– apires, Commented May 24, 2017 at 14:52

Chameleon · Accepted Answer · 2017-05-25 01:00:34Z

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.

apires · Accepted Answer · 2022-05-17 08:08:46Z

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, 2022 at 8:08

answered May 24, 2017 at 15:28

apires

9271 gold badge9 silver badges18 bronze badges

3 Comments

Chameleon Over a year ago

Fixed but getting this error - also all links with the class active are highlighted. i.imgur.com/c70TJXu.jpg

Chameleon Over a year ago

(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 Over a year ago

Tried it, still no result. Thanks anyway. Will post answer when it's complete.

Mohamed-Yousef · Accepted Answer · 2017-05-24 15:18:29Z

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, 2017 at 15:18

answered May 24, 2017 at 14:53

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

3 Comments

GottZ Over a year ago

no need to do that if there is :target but ye. this would most likely work.

Chameleon Over a year ago

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 Over a year ago

All of the hrefs already have paths like that: <a class="active" href="http://nowordpress.gatewaywebdesign.com/about.html">About</a> So what does the code look like with .each() and .indexOf()?

dgeare · Accepted Answer · 2017-05-24 15:38:36Z

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, 2017 at 15:38

answered May 24, 2017 at 14:54

dgeare

2,6585 gold badges21 silver badges30 bronze badges

3 Comments

Chameleon Over a year ago

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

dgeare Over a year ago

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 Over a year ago

then just something to be aware of for the future.

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

3 Comments

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related