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

admin · Oct 10, 2022

I'm trying to follow <a href="https://stackoverflow.com/questions/2397370/change-link-color-of-the-current-page-with-css">this example</a>.

I've loaded this script:

Code:

&lt;script&gt;

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

&lt;/script&gt;

Into the

Code:

&lt;head&gt;

section for these files:

Code:

index.html

(the home page),

Code:

about.html

, and

Code:

store.html

For <a href="http://nowordpress.gatewaywebdesign.com/" rel="nofollow noreferrer">this site</a>. 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:

Code:

.active {
color:#337ab7;
}

So when we're on Home (index.html), the Home link should be

Code:

#337ab7

, when we're on About (about.html), the About link should be

Code:

#337ab7

, and when we're on Store (store.html), the store link should be

Code:

#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:

<strong>EDIT</strong>: Added

Code:

active

class to the links in question:

Code:

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

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

        &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
    &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
&lt;/nav&gt;

And again here is the link for the <a href="http://nowordpress.gatewaywebdesign.com/" rel="nofollow noreferrer">live site</a>. Thank you.

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

admin

Administrator

Visitors Online