Question

如果是当前网址，我想添加要链接的类。

网址结构如下：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>

如何检查当前页面网址（搜索参数）和链接的网址（搜索参数）是否相同，然后我可以在此链接中添加课程？

例如，如果我在页面上：/search?date=2010&author=Adam+Smith，如果链接href是/search?author=Adam+Smith&date=2010，那么我也想在此链接中添加类。（注意：请注意，两个链接都具有相同的参数。）

Answer 1

我不确定我是否得到了您的积分，您的代码应该正常工作，您能为您提供输出和HTML页面样本吗？

否则，您只需使用Query Selector或JQuery：

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

这将获取您网址的最后一段，然后获得一个包含与此匹配的所有链接的数组。如果链接href是完整路径，则可以使用正则表达式仅获取搜索部分。

然后你可以简单地向这个var添加一个类：

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

Answer 2

您可以使用此代码段

搜索查询字符串参数

＆＃13;

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

＆＃13;

.blackx{
  color: black;
}

＆＃13;

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

＆＃13;

请参阅这篇文章： 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)
                {
					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)
                {
                	//add class here
                	 alert('add class here');
                }
            }
    });
});

如果链接是当前URL，如何将类添加到链接？

3 个答案: