Reputation: 99

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.

Upvotes: 1

Answers (4)

apires

Reputation: 927

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.

Upvotes: 2

Chameleon

Reputation: 99

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.

Upvotes: 2

dgeare

Reputation: 2658

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.

Upvotes: 1

Mohamed-Yousef

Reputation: 24001

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>

Upvotes: 1

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

Answers (4)

Related Questions