基于URL的活动链接

Question

有人能帮我吗..。我想根据我的URL在我的菜单上添加一个活动类

这是代码

<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>

可能的网址

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

所以，我需要的是当URL是http://www.whatever.com/?tag=automotive,big-data时，我想再添加一个类，比如active。

示例：

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>

Answer 1

这种类型的代码适合您。

// 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" );    
}

您可以在这里看到工作代码：http://jsfiddle.net/mh7ory9n/8/

Answer 2

我只是做了类似的例子@clement使用vanilla js。例如，您可以使用tags.push("item3")更新标记数组。

//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'
        });
    }
}

您可以看到在该链接上运行的示例：http://jsfiddle.net/newpatriks/xes9tvpa/