CODEWITHSUNDEEP
javascriptjqueryhtml
Learning
Learning

Reputation: 20001

Add class to nav if part of url matchs the menu items

Let us say i have following main menu structure for which i need to add class active class to nav if part of url matches the menu link

for example www.domain.com/en/blog/this-is-firt-blog in this case i need to add active class to second item in name /blog

    <div class="wrapper">
    <ul>
<li><a href="/en/">Home</a></li>
    <li><a href="/en/blogs/" >All Blogs</a></li>
    <li><a href="/en/videos/" >All Videos</a></li>
    <li><a href="/en/contact/" >Contact Us</a></li>
    </ul>
    </div>

https://codepen.io/anon/pen/aYBzRd

I use below code to match the part of url which is /blog but this code adds active class to all menu items

 $(".wrapper li a").first().removeClass("active-menu");

        var pathnameurl = window.location.pathname;

        if (pathnameurl.indexOf('/blog') != -1) {
           // alert("match");

            $(".wrapper li a").each(function (index, element) {
                $(element).addClass("active");

            });
        }
        else
        {
            alert("nomatch");
        }

I tried using $(this).addClass("active"); but that also adds active class to all menu items

Upvotes: 2

Views: 290

Answers (7)

Nick
Nick

Reputation: 147166

This code should work for any URL starting with /xy/type where xy is a 2 letter code (e.g. /en/blog..., /es/video...). It should be easily modifiable for similar forms.

// get the path name
var pathnameurl = window.location.pathname;
// extract the path type - assumes path is of the form /xy/type/...
var pathtype = pathnameurl.replace(/^\/..\/([a-z]+).*$/, '$1');
// now set the corresponding menu item active
$('[href*=' + pathtype + ']').addClass('active');

Upvotes: 1

kuzma
kuzma

Reputation: 56

Why don't you try something like this:

$('[href*=blog]').addClass('active')

https://codepen.io/kuzmanovic/pen/pLNJNo?editors=1111

p.s. your css also required change to work

EDIT: If you need to add slash to css selector:

$('[href*="/blog"]').addClass('active')

Upvotes: 4

Deowan Faruque Ahamad
Deowan Faruque Ahamad

Reputation: 88

Use This

        $(".wrapper li a").removeClass("active");

        var pathnameurl = window.location.pathname; //'someurl/en/blogs/'

        $(".wrapper li a").each(function (index, element) {
              var $el = $(this);
              var href = $el.attr('href');

              if (pathnameurl.indexOf(href) >= 0)
                $el.addClass("active");

        });

https://codepen.io/anon/pen/eMBNMB

Upvotes: 3

FRED WILLIAMS ASSAMOI
FRED WILLIAMS ASSAMOI

Reputation: 96

Try this

$(".wrapper li a").first().removeClass("active-menu");

    var pathnameurl = window.location.pathname;
    $(".wrapper li a").each(function() {
        if(pathnameurl.indexOf($(this).attr("href")) != -1)

        {
            $(this).addClass("active");
        break;
        }

        else
    {
        alert("nomatch");
    }
    });

Upvotes: 1

Sparks
Sparks

Reputation: 592

Try doing this to your code:

<div class="wrapper">
<ul>
<li><a id="x" href="/en/">Home</a></li>
<li><a id="y" href="/en/blogs/" >All Blogs</a></li>
<li><a id="z" href="/en/videos/" >All Videos</a></li>
<li><a id="w" href="/en/contact/" >Contact Us</a></li>
</ul>
</div>

Then in the javaScript code try this:

var pathname = window.location.href;
if (pathname.indexof("/blogs") > -1){
    document.getElementById("y").classlist.add("active");
    document.getElementById("z").classlist.remove("active");
    document.getElementById("w").classlist.remove("active");
}else if(pathname.indexof("/videos") > -1){
    document.getElementById("z").classlist.add("active");
    document.getElementById("").classlist.remove("active");
    document.getElementById("w").classlist.remove("active");
}else if(pathname.indexof("/contact") > -1){
    document.getElementById("w").classlist.add("active");
    document.getElementById("y").classlist.remove("active");
    document.getElementById("z").classlist.remove("active");
}

if you are using word press try:

<div class="wrapper">
<ul>
<li><a href="/en/">Home</a></li>
<li><a href="/en/blogs/" >All Blogs</a></li>
<li><a href="/en/videos/" >All Videos</a></li>
<li><a href="/en/contact/" >Contact Us</a></li>
</ul>
</div>

and your js will be:

var pathname = window.location.href;
if (pathname.indexof("/blogs") > -1){
    var li = document.getElementsByTagName("li");
    for(var i = 0;i<li.length;i++){
        if(li[i].innerText === "All Blogs"){
            li[i].classlist.add("active");
        }else {
            if (li[i].classlist.contain("active")){
                li[i].classlist.remove("active");
            }
        }
    }
}

This must fix your problem obviously and Good Luck.

Upvotes: 1

Rohit Kardani
Rohit Kardani

Reputation: 105

$(document).ready(function(){
var pathnameurl = window.location.pathname;
if (pathnameurl.indexOf('/blog') != -1) {
    $('a').each(function() {
        if($(this).attr("href") == "/en/blogs/") {
            $(this).parent().addClass("active")
        }
    }); 
}
else {
    alert("nomatch");
} 
});

try this

Upvotes: 1

badboy24
badboy24

Reputation: 223

make sure to remove all the classes from a tag

var pathnameurl = window.location.pathname;
if (pathnameurl.indexOf('/blog') != -1) {
    var elements = document.querySelectorAll(".wrapper li a");
    for(var i = 0; i < elements.length; i++) {
        if(elements[i].getAttribute("href").indexOf("/blog") > -1) {
            elements[i].className = "active";
        }
    }
} else {
    alert("nomatch");
}

or using jquery

$(".wrapper li a").first().removeClass("active-menu");
var pathnameurl = window.location.pathname;

if (pathnameurl.indexOf('/blog') != -1) {
    // alert("match");
    $(".wrapper li a").each(function (index, element) {
        if($(element).attr("href").indexOf("/blog") > -1)
            $(element).addClass("active");
    });
} else {
    alert("nomatch");
}

Upvotes: 1

Related Questions