1

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

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

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

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

4

5 回答 5

4

采用：

location.hash

获取您的目标ID，因此要获取您可以简单地执行的元素

document.getElementById(location.hash);
于 2012-12-10T13:19:05.437 回答
2

似乎 :target 直到文档完全加载后才被解析。如果您在加载时运行代码而不是在就绪时运行代码。也许您可以询问浏览器开发团队或查看源代码为什么会这样。

于 2012-12-10T13:48:04.180 回答
1

如果:target你的意思是：

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

你可以试试：

$(window.location.hash)

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

无论如何，window.location.hash作为选择器访问和使用它是完全一样的。

于 2012-12-10T13:23:31.890 回答
0

:targetjQuery 不正式支持伪选择器。虽然它可能在同时支持CSS3:target伪类和querySelectorAll()的浏览器中工作，但它在不支持的浏览器（IE8+）中不起作用。

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

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

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

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

        return false;
    };
});
于 2012-12-10T13:51:42.573 回答
-1

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

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

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

有关选择器和浏览器兼容性的更多信息，请查看此处:target的 MDN 站点

尽管上述方法可行，但我确实有一些警告。

正如 Callum Macrae 所提到的，上述内容有点骇人听闻。HTML 4 规范声明

ID 和 NAME 标记必须以字母 ([A-Za-z]) 开头，后跟任意数量的字母、数字 ([0-9])、连字符 ("-")、下划线 ("_") , 冒号 (":") 和句点 (".")。

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

在 HTML 5 中，许多这些限制已被取消，而且这个问题更有可能发生。更多信息在这里

于 2012-12-10T13:24:56.180 回答