4

以下是一个简单的测试用例来演示我正在尝试做的事情：

<html>
<head>
<title>Test</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    $(":target").css('color', 'red');
});
</script>
<ul>
    <li id="one">One</li>
    <li id="two">Two</li>
    <li id="three">Three</li>
</ul>
</body>
</html>

这个想法是通过 jQuery/Javascript 对目标项目做一些事情，当某些东西是目标时（例如，test.html#two）。

这正如我在 Firefox 和 IE 10 中所期望的那样工作，但在 Chrome、Opera 或 Safari 中却没有，这让我想知道这是否是某些浏览器中的错误，如果我正在尝试做的事情是错误的，或者如果我已经与某些规范或其他规范中不够精确的部分发生冲突。

如果我将 jQuery 代码更改为

alert($(":target").length);

很明显，Chrome、Opera 和 Safari 在 document.ready() 期间找不到 :target 元素，但稍后调用相同的代码（通过控制台或附加到单击事件的函数）确实找到了这些元素。

:target 什么时候可以被 JS 访问？

4

5 回答 5

3

这是作为评论发布的，但后来被删除，您可以尝试等待窗口加载事件：

$(window).on('load hashchange', function(){
    $(':target').css('color', 'red');
});

这对我来说在 Chrome 上产生了不同的结果，它在进行页面刷新 (F5) 时有效，但在地址栏中按 Enter 时无效。

我不知道是否有任何方法可以使用:target选择器在页面加载时正确处理此问题，但您始终可以获取哈希值并将其用作选择器：

$(window).on('load hashchange', function(){
    var target = window.location.hash;
    $(target).css('color', 'red');
});

更新

我一直在对这个问题进行一些研究以及一些测试，我有一些见解要分享：

首先，我们需要明白，在$(':target')内部调用 jQuery 时，使用querySelectorAll(':target')which 意味着它与伪类的 CSS 规范直接相关，但为什么不能在内部工作document.ready()呢？

好吧，我发现将代码包装在里面setTimeout(fn,0)实际上使选择器可用：

$(document).ready(function(){
    setTimeout(function(){
        $(':target').css('color', 'red'); //THIS WORKS
    },0);
});

您可以阅读此答案以了解添加零毫秒超时实际上如何产生影响，但基本上它允许浏览器完成其他非 javascript 相关任务（我们会发现使实际的 CSS 伪类可用于询问）。我相信 Firefox 以不同的方式管理其内部流程，这就是为什么代码可以在那里工作而无需超时的原因。

现在我还发现 jQuery 的内部 sizzle 选择器引擎为不支持 CSS:target伪类的浏览器提供了一个回退，您可以在内部使用它document.ready()而不会出现问题：

$(document).ready(function(){
    $(':target()').css('color', 'red');
});

这是因为它不是依赖于 CSS 类，而是一个使用 window.location 对象上的 hash 属性的 javascript 实现，它在内部定义如下：

"target": function( elem ) {
        var hash = window.location && window.location.hash;
        return hash && hash.slice( 1 ) === elem.id;
    }

您应该注意的唯一想法是，如果此函数未传递类似 的选择器，则此函数将遍历页面上的每个元素:target(div)，因此我相信使用我之前提供的解决方法仍然是比这更好的选择。

于 2013-08-22T04:53:25.277 回答
1

因为页面没有被重新加载。您需要将其绑定到hashchange：

$(window).on('hashchange', function(){
    $(":target").css('color', 'red');
});

http://jsfiddle.net/sXsYx/

请注意，您还有更多工作要做，也许可以将其与$(document).ready

于 2013-08-22T04:26:42.117 回答
0

您可以使用 css3 目标选择器进行样式设置

:target
{
 color:red;
}
于 2013-08-22T04:15:45.020 回答
0

由于您的示例中没有专门的逻辑（if语句等），为什么不直接在 CSS 中进行样式设置？:target伪类是一个CSS3 选择器。

:target {
    color: red;
}

请注意，这适用于所有现代浏览器，甚至一些非常旧的浏览器（例如 Chrome 1 和 Firefox 1.3），但对于 Internet Explorer，它仅从版本 9 开始受支持。

如果您愿意（CSS 和 JavaScript），您也可以在这两个地方执行此操作，但是 JavaScript 似乎是多余的，除非您特别需要 IE <= 8 兼容性。

我注意到您使用的是 jQuery 版本 1.10.1，它保留了对 IE <= 8 的支持。这重要吗？如果没有，您也可以迁移到 jQuery 2.0.2（撰写本文时的最新版本）。

于 2013-08-22T04:23:56.673 回答
-1

你应该这样做

$("li:target")

这将选择元素。这是更好的方法

请参考这个，

http://api.jquery.com/target-selector/

或者您应该删除准备好的文档并将脚本放在 html 文档的末尾

于 2013-08-22T04:26:33.257 回答