jQuery 如果 url 哈希，单击事件/激活 javascript答案

【问题标题】：jQuery if url hash, click event/activate javascriptjQuery 如果 url 哈希，单击事件/激活 javascript
【发布时间】：2012-08-10 04:54:42
【问题描述】：

所以在主页上，我有一个指向产品列表页面的链接。产品页面有展开/折叠 div。

我需要适当的 div 来扩展，具体取决于 url# 是什么。

所以首页的链接是

<a href="/out-products.php#healthysnacks">healthy snacks</a>

当我点击上面的链接时，我试图在产品页面上激活它：

<a href="javascript:ReverseDisplay('products4')" id="healthysnacks"> Healthy Snacks</a>

我尝试了一些其他代码，我发现通过检查哈希标签来触发点击，但它们都没有正常工作，我认为这是因为 ReverseDisplay js。请任何见解都会有所帮助。

谢谢

【问题讨论】：

【解决方案1】：

您可以在产品页面的文档准备功能中进行以下更改：

简单修复：由于 jQuery id-selector 是 #elementId，您可以简单地使用 window.location.hash 值作为您的 id 选择器，并使用它来定位所需的元素。

if ( window.location.hash ) {
    $(window.location.hash).click(); //clicks on element specified by hash
}

更好：除上述之外，将 js 从您的标记中取出。

$('#healthysnacks').click(function(e) {
    e.preventDefault();
    ReverseDisplay('products4');
});

然后，在这样做之后，使用上面的$(window.location.hash).click() 代码。另外，将您的链接更改为：

<a href="#" id="healthysnacks"> Healthy Snacks</a>

【讨论】：

@raminson window.location.hash 给出了一个字符串，在这种情况下包含 '#healthysnacks' 所以它可以作为一个 id 选择器。不过，我可能应该在帖子中澄清这一点，谢谢
是的，你是对的，我忘记了 hash 属性也返回 # 符号。
@alex 你在页面中包含了 jQuery 吗？ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
它是一个旧网站，我有 1.5.1，让我升级 :)
手风琴上的第一个横幅，点击文字，它链接到我需要的东西

【解决方案2】：

您可以使用Location 对象的hash 属性，尝试以下操作：

$(document).ready(function(){
   var id = window.location.hash;
   $(id).trigger('click')
})

当你使用 jQuery 而不是使用javascript: 协议时，你可以使用 jQuery click 方法：

$('#healthysnacks').click(function() {
   // do something here
})

【讨论】：

【解决方案3】：

这里建议的答案是有效的，但是...

在使用 jQuery 选择器中的 window.location.hash 时要格外小心，因为这可能会导致 XSS 漏洞。 $() 还可以创建一个 HTML 元素，并使用精心构造的哈希值，有人可以执行任意 JavaScript 代码。

例如

http://my-website.com/about#'><img src=x onerror=alert(/XSSed/)>

如果 my-websites.com/about 页面在 jQuery 选择器中使用 window.location.hash，则该 onerror 代码最终会被执行。

【讨论】：