Active Link Based on the URL

Question

Can anyone help me.. I want to add a active class on my menu based on my URL

Here is the code

<div class="taglist">
<a class="automotive" title="Automotive Tag" href="#">Automotive</a>
<a class="banca" title="Banca Tag" href="#">Banca</a>
<a class="banking-pt" title="Banking Tag" href="#">Banking</a>
<a class="big-data" title="Big Data Tag" href="#">Big Data</a>
<a class="bigdata" title="BigData Tag" href="#">BigData</a>
<a class="cloud" title="Cloud Tag" href="#">Cloud</a>
</div>

Possible URL´s

http://www.whatever.com/?tag=automotive,big-data,cloud
http://www.whatever.com/?tag=automotive,big-data
http://www.whatever.com/tag/automotive

So, what i need is when the URL is http://www.whatever.com/?tag=automotive,big-data i would like to add one more class, like active.

Example:

URL: http://www.whatever.com/?tag=automotive,big-data

HTML:

<div class="taglist">
<a class="automotive active" title="Automotive Tag" href="#">Automotive</a>
<a class="banca" title="Banca Tag" href="#">Banca</a>
<a class="banking-pt" title="Banking Tag" href="#">Banking</a>
<a class="big-data active" title="Big Data Tag" href="#">Big Data</a>
<a class="bigdata" title="BigData Tag" href="#">BigData</a>
<a class="cloud" title="Cloud Tag" href="#">Cloud</a>
</div>

possible duplicate of [jquery active class to menu item based on current url](http://stackoverflow.com/questions/10593591/jquery-active-class-to-menu-item-based-on-current-url) — Turnip, Dec 05 '14 at 12:09
Yes...is true, but only works for a url with one tag (http://www.whatever.com/?tag=automotive)...if you have multiple tags (http://www.whatever.com/?tag=automotive,big-data) it doesn´t work — Luís P. A., Dec 05 '14 at 12:14

clement · Accepted Answer · 2014-12-05T13:34:48.387

1

This style of code work for you

// var url=document.URL;
var url="http://www.whatever.com/tag/automotive/";

// remove latest /
if (url[url.length-1] == "/")
{url = url.substring(0, url.length-1);}
alert(url);

// when "tag/"
if(url.indexOf("tag/") != -1){
    url = url.split('tag/')[1];
}
// when "tag="
else
{
    url = url.split('tag=')[1];
}
// split in table
var tagArray = url.split(',');
// foreach table item put active on menu links
for (var i = 0; i < tagArray.length; i++) {
        $( "."+tagArray[i] ).addClass( "active" );    
}

you can see the working code here: http://jsfiddle.net/mh7ory9n/8/

edited Dec 05 '14 at 13:34

answered Dec 05 '14 at 12:13

clement

4,204
10
65
133

I gave you an error the single url is diferent (http://www.whatever.com/tag/automotive) – Luís P. A. Dec 05 '14 at 12:27
I made an example with 2 possible urls (one is comment) http://jsfiddle.net/mh7ory9n/3/ – Luís P. A. Dec 05 '14 at 12:30
@LuisP.A. if my response satisfy you, please consider to validate my response / vote – clement Dec 05 '14 at 12:59
I´m checking out..i´m with some issues...stay tuned! – Luís P. A. Dec 05 '14 at 13:14
Hello again...a minor problem (I think) the single url ends with a slash(/), and there before your test is without a slash in the end of the url...is it possible to fix it? http://jsfiddle.net/mh7ory9n/7/ – Luís P. A. Dec 05 '14 at 13:24

newpatriks · Answer 2 · 2014-12-05T13:49:08.063

I just did similar example to @clement using vanilla js. You could update the array of tags using tags.push("item3") for example.

//var url = "http://www.whatever.com/tag/automotive/big-data/";
var url = "http://www.whatever.com?tag=automotive,big-data";
getActiveItems(url);

function getActiveItems(url) {

    if (url.indexOf("tag=") == -1) {
        if (url[url.length-1] == "/")
            url = url.substring(0, url.length-1);
        var tags = (url.split("tag/"))[1].split("/");
    } else {
        var tags = (url.split("tag="))[1].split(",");
    }

    var listElements = document.getElementById("navbar").getElementsByTagName("li");
    for (i = 0; i < listElements.length; i++) {
        tags.map(function (elem) {
            if ((listElements[i].className).indexOf(elem) != -1) 
                listElements[i].className += ' active'
        });
    }
}

You can see the example running on that link: http://jsfiddle.net/newpatriks/xes9tvpa/

Its the same..doesn´t work with my single url (http://www.whatever.com/tag/automotive)...only works with multiple tags — Luís P. A., Dec 05 '14 at 12:35
@LuisP.A. I updated the example putting an if statement to control that. I am not sure if it's what you are looking for. — newpatriks, Dec 05 '14 at 13:27

Active Link Based on the URL

2 Answers2