Question

我正在尝试使用以下代码使用jQuery在页面加载上选择:target元素，但它找不到任何内容并返回[]。为什么不起作用？

$(function () {
    var $target = $(':target');
    console.log($target); // []

    if ($target.length) {
        $target.addClass('kbactive');
    }
});

页面加载后手动运行$(':target')正常;为什么不立即起作用？

Answer 1

使用：

location.hash

获取你的目标ID，所以要获得你可以做的元素

document.getElementById(location.hash);

Answer 2

似乎：在文档完全加载之前，不会解析目标。如果您在加载时运行代码而不是在准备就绪时它可以运行。也许您可以询问浏览器开发团队或检查源代码为何会出现这种情况。

Answer 3

如果你的意思是:target：

：target伪类表示唯一元素（如果有）一个id匹配文档URI的片段标识符。

您可以尝试：

$(window.location.hash)

$(':target')可能无法正常工作的原因是因为它没有在jQuery API中记录，并且不清楚选择器的引擎是否可以运行它。

无论如何，访问window.location.hash并将其用作选择器完全相同。

Answer 4

jQuery没有正式支持 :target 伪选择器。虽然它可能适用于同时支持CSS3 :target pseudo-class和querySelectorAll()的浏览器，但它不适用于没有（IE8 +）的浏览器。

在DOM Ready上选择相同元素的干净，跨浏览器方式是使用location.hash：

if(location.hash) {
    var target = $(location.hash); // location.hash already includes the #
}

那就是说，如果你不喜欢它，因为“它很hacky”（绝对不是），你可以在jQuery中自己添加对:target选择器的支持：

$.expr[":"].target = $.expr.createPseudo(function(s)
{
    return function(el)
    {
        if(location.hash)
            return $(el).attr('id') == location.hash.substring(1);

        return false;
    };
});

Answer 5

我已将您的代码更改为使用LeviBotelho的建议

$(function () {
    var targetID = window.location.hash;
    var $target = $( targetID );
    console.log($target);

    if ($target.length) {
        $target.addClass('kbactive');
    }
});

有关:target选择器和浏览器兼容性的详细信息，请查看MDN网站here

虽然上述方法有效但我确实有一些警告。

正如Callum Macrae所说，上面的内容有点笨拙。 The HTML 4 specification个州

ID和NAME令牌必须以字母（[A-Za-z]）开头，可能是后跟任意数量的字母，数字（[0-9]），连字符（“ - ”），下划线（“_”），冒号（“：”）和句点（“。”）。

从技术上讲，您可以在ID中使用冒号，如果冒号在location.hash中转义为%3A，则上述解决方案可能无效。

在HTML 5中，许多限制已被解除，这个问题更有可能发生。更多信息here

选择：页面加载时的目标元素

5 个答案: