首页 文章

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

提问于
浏览 次
0

如果它是当前的URL，我想添加类来链接 .

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

/search?query1&query2&query3...

我可以使用该代码将类添加到'current URL link'：

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

How can I check if the current page URL (search parameters) and a link's URL (search parameters) same then I can add a class to this link?

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

javascript jquery

3 回答

  • 0

    我不确定我得到你的积分，你的代码应该工作，你能给你输出和HTML页面样本吗？

    否则，您可以简单地使用Query Selector或JQuery：

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

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

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

    currentURLLink[0].setAttribute("class", "Your Class");
    回复于
  • 0

    您可以使用此代码段搜索查询字符串参数

    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?

    回复于
  • 0

    你可以试试这个;

    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');
                }
            }
    });
});
    回复于

相关问题