活動鏈接基於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

回答

相關問題