How can I compare the current page URL with the navigation bar?

Question

How can I compare the current page URL with the navigation bar?

Looking to compare the URL of a current page to an element in the navigation bar using jQuery.

Started by assigning the current URL to a variable:

var currentPage = window.location.href;

Then utilized an .each function to loop through each item in the navigation bar:

$("nav ul li a").each(
    function() {

    }
);

Now, trying to figure out what to compare the URL to from the list within an if statement:

if(currentPage === ????) {};

Goal is to highlight the page currently being visited in the navigation bar by changing its background image with CSS once the jQuery identifies the match. This is a task assigned in a jQuery class.

Despite searching, struggling to find a solution that matches this specific issue. Any insights would be greatly appreciated!

Still grappling with how to phrase this question, hoping for some clarity and guidance on how to achieve this desired functionality.

javascript jquery css

Answer 1

Answer №1

It appears that the solution you are seeking is:

this.href

This code snippet will provide you with the specific href value of the anchor tag that you are iterating through.

(Enhanced answer based on feedback from a helpful comment)

Answer 2

It appears that the solution you are seeking is:

this.href

This code snippet will provide you with the specific href value of the anchor tag that you are iterating through.

(Enhanced answer based on feedback from a helpful comment)

Answer 3

Answer №2

When checking for matching links on the current page, you can use parse(..). Unfortunately, the demo does not run correctly on stackoverflow. To see the result, you will need to visit codepen.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<style>
    a {
        color: #000;
    }

    a.active {
        color: red;
    }
</style>
<nav>
    <ul>
        <li><a href="?home">Home</a></li>
        <li><a href="?contact">Contact</a></li>
        <li><a href="?about">About</a></li>
        <li><a href="?contact#hash">Contact Us</a></li>
    </ul>
</nav>
<script>

function parse(url) {
    var parts = url.match(/^([^#?]*?)?(\?.*?)?(#.*)?$/);
    return {
        uri: parts[1], search: parts[2], hash: parts[3],
        /**
         *
         * @param that <b>string</b>/<b>object</b> has `href` property,e.g:location
         * @param hash skip hash matching
         * @param search skip search matching
         * @returns {boolean|*} if url matched return `true`,otherwise return `false`.
         */
        match: function (that, hash, search) {
            var self = this, that = parse(typeof that == 'string' ? that : that.href);
            return (!self.uri || self.uri == that.uri)
                && (search || self.search == that.search)
                && (hash || self.hash == that.hash);
        }
    };
}



$('nav li a').each(function () {
    console.log(['matching with ', this.href, '===>', parse(this.href).match(location)].join(' '));
    console.log(['matching with ', $(this).attr('href'), '===>', parse($(this).attr('href')).match(location)].join(' '));
    if (parse($(this).attr('href')).match(location/*,true*/))//remove comment and try the result.
        $(this).addClass('active');
});

</script>

Answer 4

When checking for matching links on the current page, you can use parse(..). Unfortunately, the demo does not run correctly on stackoverflow. To see the result, you will need to visit codepen.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<style>
    a {
        color: #000;
    }

    a.active {
        color: red;
    }
</style>
<nav>
    <ul>
        <li><a href="?home">Home</a></li>
        <li><a href="?contact">Contact</a></li>
        <li><a href="?about">About</a></li>
        <li><a href="?contact#hash">Contact Us</a></li>
    </ul>
</nav>
<script>

function parse(url) {
    var parts = url.match(/^([^#?]*?)?(\?.*?)?(#.*)?$/);
    return {
        uri: parts[1], search: parts[2], hash: parts[3],
        /**
         *
         * @param that <b>string</b>/<b>object</b> has `href` property,e.g:location
         * @param hash skip hash matching
         * @param search skip search matching
         * @returns {boolean|*} if url matched return `true`,otherwise return `false`.
         */
        match: function (that, hash, search) {
            var self = this, that = parse(typeof that == 'string' ? that : that.href);
            return (!self.uri || self.uri == that.uri)
                && (search || self.search == that.search)
                && (hash || self.hash == that.hash);
        }
    };
}



$('nav li a').each(function () {
    console.log(['matching with ', this.href, '===>', parse(this.href).match(location)].join(' '));
    console.log(['matching with ', $(this).attr('href'), '===>', parse($(this).attr('href')).match(location)].join(' '));
    if (parse($(this).attr('href')).match(location/*,true*/))//remove comment and try the result.
        $(this).addClass('active');
});

</script>

Answer 5

Answer №3

After some trial and error, I was finally able to solve this using a combination of methods including .each. Here's the code snippet that did the job:

var currentPage = window.location.href;

$("nav ul li a").each(
    function() {
        console.log($(this).attr("href"));
        if (currentPage.indexOf($(this).attr("href")) !== -1){
            $(this).addClass("highlight");
            return false;
        }
     }
);

My initial approach was completely off, I realize now that I was overcomplicating things. But now, this solution works perfectly. Lesson learned!

Answer 6

After some trial and error, I was finally able to solve this using a combination of methods including .each. Here's the code snippet that did the job:

var currentPage = window.location.href;

$("nav ul li a").each(
    function() {
        console.log($(this).attr("href"));
        if (currentPage.indexOf($(this).attr("href")) !== -1){
            $(this).addClass("highlight");
            return false;
        }
     }
);

My initial approach was completely off, I realize now that I was overcomplicating things. But now, this solution works perfectly. Lesson learned!

How can I compare the current page URL with the navigation bar?

Answer №1

Answer №2

Answer №3

Similar questions

Accessibility considerations for anchor tags with no content

The reason behind the creation of .pnp.loader.mjs and .pnp.cjs files by yarn

Why isn't the main body of CSS extending across the entire page?

Shared Vue configuration settings carrying over to Jest spec files

What is the process of redefining the toString method for a function?

Jade Compilation with Gulp

Setting the data type for a React Stateless Functional Component (SFC) in TypeScript

"Failure in bundling with NodeJS using nexe and fusebox

Failed to load CSS file in nodeJS application

Guide: Building a Dropdown Form in Angular 2

Can you explain the significance of the characters '& > * + *' in JSX (CSS)?

Is there a way to differentiate between a browser application running on a local development server and an online staging server?

Altering the context of Javascript script execution

api for enhancing images in Laravel app through preview, enlarge, and zoom functionalities

What strategies can be used to effectively combine Server-side postbacks with jquery's animations?

Managing numerous inquiries from a single customer within a succession of brief intervals

Get ready for 10 AM with the RxJS timer function

Creating Objects on the Fly with Mistic Query Builder

Learn how to render list items individually in Vue.js using the 'track-by $index' directive

What is the process for activating an event before another event on the same element with vanilla JavaScript?