(Minor hiccup) add active navigation class to menu item based on URL using jquery

Question

0.00/5 (No votes)

See more:

I managed to make it but got some minor hiccup. Currently, the active class been added to current URL including the All Watches link (maybe because the URL is the homepage URL).

May I know what I need to author for the script to work exactly as what the current URL looks like.

This is the HTML codes.

<div class="tagcloud">
<ul class="tag-widget">
    <li>
    <a href="http://effectiveadvisory.com/wingwah-may/">All Watches</a>
    </li>
    <li>
    <a href="http://effectiveadvisory.com/wingwah-may/product-tag/military/">Military</a>
    </li>
    <li>
    <a href="http://effectiveadvisory.com/wingwah-may/product-tag/diver/">Diver</a>
    </li>
    <li>
    <a href="http://effectiveadvisory.com/wingwah-may/product-tag/pilots/">Pilots</a>
    </li>
    <li>
    <a href="http://effectiveadvisory.com/wingwah-may/product-tag/racing/">Racing</a>
    </li>

</ul>

</div>

This is the JQuery codes.

jQuery(document).ready(function($){
$("#custom_html-2 a")
.filter(function(){ 
return location.href.match($(this).attr("href"))
})
.addClass("tag-active");
});

What I have tried:

Some googling and posted help at stackoverflow. But no response.

I think the problem lies in the filter function. I think I need to make the current URL match exactly as the href link. But I've no idea how.

Posted 23-Jun-18 21:52pm

Member 13884629

Updated 26-Jun-18 7:35am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2018-06-26T07:36:00

The match method[^] takes a regular expression as its argument, and either returns an array containing the matches, or null.

Your href is not a regular expression, but since it doesn't contain any special characters, it will act like one. It doesn't contain any anchoring clauses, so your match call will return a match if the URL contains the specified value.

Since all of the URLs you've shown contain the "All watches" URL, that one will always be marked as active.

To compare the full URL, use the equality operator:

JavaScript

$(function(){
    $("#custom_html-2 a").filter(function(){ return location.href === this.href; }).addClass("tag-active");
});