CODEWITHSUNDEEP
jquery
Luís P. A.
Luís P. A.

Reputation: 9739

Active Link Based on the URL

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>

Upvotes: 0

Views: 1124

Answers (2)

newpatriks
newpatriks

Reputation: 581

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/

Upvotes: 0

clement
clement

Reputation: 4266

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/

Upvotes: 1

Related Questions