活动链接基于URL

谁能帮我...我想根据我的网址活动链接基于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>

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

所以，我需要的是当网址是http://www.whatever.com/?tag=automotive,big-data我想添加一个类，如活动。

例子：

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>

来源

2014-12-05 Luis P. A.

[jQuery的主动类菜单项基于当前URL]（可能重复http://stackoverflow.com/questions/10593591/jquery -active-class-to-menu-item-based-on-current-url） – Turnip 2014-12-05 12:09:04

是......是真的，但只适用于带有一个标签的网址（http://www.whatever.com/?tag=汽车）......如果你有多个标签（http://www.whatever.com/?tag=automotive,big-data），它不起作用 – 2014-12-05 12:14:55

@ LuisP.A。你看到我的代码了吗？它适用于你 – clement 2014-12-05 12:21:16

代码这样的工作作风为您

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

来源

2014-12-05 12:13:57 clement

我给你一个错误的单一网址是不同的（http://www.whatever.com/tag/automotive） – 2014-12-05 12:27:33

我做了一个例子与2个可能的网址（一个是评论）http：// jsfiddle .net/mh7ory9n/3/ – 2014-12-05 12:30:38

@ LuisP.A。完成，它现在适用于两个网址！ – clement 2014-12-05 12:34:19

我只是用vanilla js做了类似于@clement的例子。例如，您可以使用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/

来源

2014-12-05 12:30:13 newpatriks

它是一样的..不与我的单一网址（http://www.whatever.com/tag/automotive)...一起使用多个标签 – 2014-12-05 12:35:12

@ LuisP.A工作。我更新了一个例子，用if语句来控制它。我不确定这是你在找什么。 – newpatriks 2014-12-05 13:27:49

活动链接基于URL

回答

相关问题