Question

我正在使用像这样的jQuery进行活动链接

$(document).ready(function() {
    var url = window.location.href;

    $(".main-navigation ul li a").each(function() {
      var $this = $(this);

        var href = $this.attr("href");

        if (url === href) {

            $this.css({
                'color': '#666666',
                'font-weight': 'bold',
            }).addClass('active').removeAttr("href").removeAttr("onclick");         
        }           
    });

这里唯一的问题是我的href就像这样/ Settings / File？id = 333

并且url会是这样的

http://www.example.com/Settings/File?id=333

然后a href和ulr不匹配，如何删除http和url的示例并用href检查？

Answer 1

首先：如果你打算给他们一个班级，不要在那里加上额外的内联CSS ......

这里有一个应该有用的剪刀......

var uri = window.location.href;
$(".main-navigation ul li a").filter(function() {
    return (this.href == uri || uri.substr(0,this.href.length + 1) == this.href + "?");
}).css({
    'color': '#666666',
    'font-weight': 'bold',
}).addClass('active').removeAttr("href").removeAttr("onclick");

Answer 2

要/Settings/File?id=333使用：

$this[0].pathname;

Get pathname from href in Javascript

Location pathname Property

Answer 3

您想将http://www.example.com/Setting/File?id=333更改为/Setting/File?id=333吗？

var url = window.location.href.split('.com').pop();

如果您不知道它是否是.com网站，请尝试以下操作：

function getLocation(url) {
    var el = document.createElement("a");
    el.href = url;
    return el.pathname;
}

var url = getLocation(window.location.href);

Answer 4

您可以使用本机元素DOM及其href，它将提供完整的URL：

$(function(){
  var url = window.location.href;

  $(".main-navigation ul li a").each(function() {
    if (url === this.href) {
      $(this).css({
        'color': '#666666',
        'font-weight': 'bold',
      }).addClass('active').removeAttr("href").removeAttr("onclick");
    }
  });
});

example on jsbin（列表中的第一项与没有域名的网址相同）

与jQuery建立活动链接？

4 个答案: