如何將類添加到鏈接，如果它是當前的URL？

Question

我想添加類來鏈接，如果它是當前的URL。

URL結構如下：http://localhost/search?date=2010&number_of_books=10;

/search?query1&query2&query3...

我可以添加類與代碼 '當前URL鏈接'：

<script> 
    $(document).ready(function($) { 
     $("a").each(function() { 
      var href = $(this).attr('href'); 
      var current_url = location.pathname + location.search; 
      if (current_url == href) { 
       $(this).addClass('active'); 
      } 
     }); 
    }); 
</script> 

如何檢查，如果當前頁面URL（搜索參數）和一個鏈接的URL（搜索參數）相同，那麼我可以添加一個類到這個鏈接？

例如，如果我在頁面上：/search?date=2010&author=Adam+Smith，如果鏈接href是/search?author=Adam+Smith&date=2010，那麼我想要添加類到這個鏈接。 （注意：考慮到兩個鏈接都有相同的參數）。

Answer 1

我不確定我是否明白你的觀點，你的代碼應該工作，你能給你輸出和HTML頁面的樣本嗎？

否則，你可以簡單地使用查詢選擇或JQuery的：

var currentURL = (window.location.pathname.substr(window.location.pathname.lastIndexOf('/') + 1)); 
var currentURLLink = document.querySelectorAll("a[href='"+currentURL+"']"); 

這將讓你的URL的最後一段，然後得到相匹配的這一切鏈接的數組。如果您的鏈接href是完整路徑，那麼您可以使用正則表達式來獲取搜索部分。

然後你就可以一類簡單地添加到該變種：

currentURLLink[0].setAttribute("class", "Your Class"); 

Answer 2

你可以使用這個片段

function getURLParam(){ 
 
    $("a").each(function() {   
 
     var author = getParameterByName("author", $(this).attr('href')); 
 
     var date = getParameterByName("date", $(this).attr('href')); 
 
     console.log(author); 
 
     console.log(date); 
 
     if (author == "Adam Smith" && date == "2010") { 
 
      $(this).addClass('blackx'); 
 
     } 
 
    }); 
 
} 
 

 
//https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript 
 
function getParameterByName(name, url) { 
 
    if (!url) { 
 
     url = window.location.href; 
 
    } 
 
    name = name.replace(/[\[\]]/g, "\\$&"); 
 
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), 
 
     results = regex.exec(url); 
 
    if (!results) return null; 
 
    if (!results[2]) return ''; 
 
    return decodeURIComponent(results[2].replace(/\+/g, " ")); 
 
}

.blackx{ 
 
    color: black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button onclick="getURLParam();">get params</button><br> 
 
<a href="http://localhost/search?author=Adam+Smith&date=2010">link</a><br> 
 
<a href="http://localhost/search?author=Adam+Gold&date=2011">link</a>

請參閱這篇搜索查詢參數： How can I get query string values in JavaScript?

Answer 3

你可以試試這個;

function getQueryString(name) { 
 
     var url = window.location.href; 
 
     name = name.replace(/[\[\]]/g, "\\$&"); 
 
     var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), 
 
      results = regex.exec(url); 
 
     if (!results) return null; 
 
     if (!results[2]) return ''; 
 
     return decodeURIComponent(results[2].replace(/\+/g, " ")); 
 
    } 
 
     
 
$(document).ready(function($) { 
 
    $("a").each(function() { 
 
      var href = $(this).attr('href'); 
 
      var path = href.split('?')[0]; 
 
      var search = href.split('?')[1]; 
 
      if(path == location.pathname) 
 
      { 
 
       var qs = search.split('&'); 
 
       var allEqual = true; 
 
       for(var i in qs) 
 
       { 
 
\t \t \t \t \t var key = i.split('=')[0]; 
 
        var val = i.split('=')[1]; 
 
        if(getQueryString(key) != val) 
 
        { 
 
         allEqual = false; 
 
         break; 
 
        } 
 
       } 
 
       
 
       if(allEqual && search.split('&').length == location.search.split('&').length) 
 
       { 
 
       \t //add class here 
 
       \t alert('add class here'); 
 
       } 
 
      } 
 
    }); 
 
});