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

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.

javascriptjqueryhtmlcsshyperlink


Solution 1:[1]

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.

Solution 2:[2]

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>

Solution 3:[3]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3

Related Questions