Simple Way to Modify Color of Active Page Link - HTML, CSS, and JavaScript

Question

Simple Way to Modify Color of Active Page Link - HTML, CSS, and JavaScript

I found a helpful example on how to change link colors for the current page here.

Here is the script I added:

<script>

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

</script>

I inserted this script into the <head> section of these files: index.html (the home page), about.html, and store.html

For our website. Service links should not be highlighted, and Blog and My Account are currently inactive.

I then defined the corresponding style in my CSS:

.active {
color:#337ab7;
}

So when we're on the Home page (index.html), the Home link should display in color #337ab7, similarly for About and Store pages.

However, I am still not seeing any changes. Do I need to modify anything in the JavaScript, CSS, or HTML to make it work properly?

Below is the HTML code for the Navigation Menu in question:

UPDATE: Applied active class to the relevant links:

<nav class="navbar navbar-default">
<div class="container">
    <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>

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

Once again, here is the live site. Appreciate your assistance.

javascript jquery html css hyperlink

Answer 1

Answer №1

SOLUTION

As an illustration, consider the store page:

HTML:

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

CSS: (

.navbar-default .navbar-nav > li > a

was prioritizing the .active class, highlighting 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 initiates
    $(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 completes

Ensure to modify which <a> link receives the active class based on the currently active page in your document - for instance, if you're modifying login.html, then your HTML should resemble 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 working on blog.php, then your HTML will appear 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 forth.

To wrap up, in index.html (the homepage), include a span with the class sr-only after the link text, as shown below:

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

To conceal the (current) tag using Bootstrap.

Answer 2

SOLUTION

As an illustration, consider the store page:

HTML:

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

CSS: (

.navbar-default .navbar-nav > li > a

was prioritizing the .active class, highlighting 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 initiates
    $(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 completes

Ensure to modify which <a> link receives the active class based on the currently active page in your document - for instance, if you're modifying login.html, then your HTML should resemble 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 working on blog.php, then your HTML will appear 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 forth.

To wrap up, in index.html (the homepage), include a span with the class sr-only after the link text, as shown below:

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

To conceal the (current) tag using Bootstrap.

Answer 3

Answer №2

The style of your .active class is currently being overridden by the class

.navbar-default .navbar-nav > li > a

.

To resolve this issue, you should adjust the CSS selector to be more specific by changing it from just .active to

.navbar-default .navbar-nav > li > a .active

.

If you only want to add the class active to the current accessed href, consider implementing the following code snippet:

$('ul.nav > li > a').each(function(){
   var url = window.location.href;
   var href = $(this).prop('href');

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

Alternatively, as suggested by @Mohamed-Yousef, you can simplify the process with:

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

This method is particularly useful when comparing full URLs.

Answer 4

The style of your .active class is currently being overridden by the class

.navbar-default .navbar-nav > li > a

.

To resolve this issue, you should adjust the CSS selector to be more specific by changing it from just .active to

.navbar-default .navbar-nav > li > a .active

.

If you only want to add the class active to the current accessed href, consider implementing the following code snippet:

$('ul.nav > li > a').each(function(){
   var url = window.location.href;
   var href = $(this).prop('href');

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

Alternatively, as suggested by @Mohamed-Yousef, you can simplify the process with:

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

This method is particularly useful when comparing full URLs.

Answer 5

Answer №3

Avoid using the .each() method, you can simply utilize a selector instead

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

If you want to understand how the

a[href*='"+ window.location.href +"']

selector functions, it essentially searches for an a tag with an href that contains window.location.href. If you alter your href attribute to something like

<a href="/website-design.html">

, this selector will no longer be operative. In such cases, you would need to use .each() in combination with .indexOf()

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

Answer 6

Avoid using the .each() method, you can simply utilize a selector instead

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

If you want to understand how the

a[href*='"+ window.location.href +"']

selector functions, it essentially searches for an a tag with an href that contains window.location.href. If you alter your href attribute to something like

<a href="/website-design.html">

, this selector will no longer be operative. In such cases, you would need to use .each() in combination with .indexOf()

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

Answer 7

Answer №4

Error on line 19 of about.html: Uncaught SyntaxError due to an invalid or unexpected token.

A strange unicode character in line 19 is causing a parsing error, which can be observed in Chrome's inspector within the "foreach" section.

Removing that unicode character may resolve the issue.

Answer 8

Error on line 19 of about.html: Uncaught SyntaxError due to an invalid or unexpected token.

A strange unicode character in line 19 is causing a parsing error, which can be observed in Chrome's inspector within the "foreach" section.

Removing that unicode character may resolve the issue.

Simple Way to Modify Color of Active Page Link - HTML, CSS, and JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Comparing Data Manipulation Techniques: Server Side vs Client Side Approaches in Reddit API Integration

Saving users' dark mode preference on my website

Pass the $scope object from a controller to a modal controller

Tips for incorporating properties from JSON-retrieved objects into a template

Create a modal using the base of a[href^=“#id”]

Struggling with passing parameters through a route and displaying them in the Reddit app using React?

Is there a way to obtain cookies on a Server-side component in the latest version of Next.js?

"Real-time image upload progress bar feature using JavaScript, eliminating the need for

Handling the width and borders of CSS cells that are positioned outside of a table

Comparing form submission with a button click to pass data using Ajax - success in one method but failure in the other

Guide on converting AS3 to HTML5 while incorporating external AS filesAlternatively: Steps for transforming AS

Change the class of <body> when the button is clicked

Transfer data accurately from main window to fancybox iframe

Dynamic font size that adjusts as you change the window dimensions

Guide to accessing HTML elements and saving them in a JSON formatted text using JavaScript

Removing the border from a button in CSS and HTML

When the settings are saved in PHP and AJAX, the password fields are automatically cleared

Updating style of element in EJS following POST request in Node.js using Express

Tips on updating CSS styles for navigation bar links in real time

How can I determine if a URL in react js includes a specific string?