Question

我有一个中心页面example.com/info/requirements，其中包含运行不同应用程序的要求。默认情况下，只显示显示旗舰应用程序要求的div，用户可以单击按钮打开/关闭不同的div。

<a id="main-app"></a>
<div id="req-container-main" class="invisible">
    [Requirements are listed here]
</div>
<a id="app2"></a>
<div id="req-container-app2" class="invisible">
    [Requirements are listed here]
</div>
<a id="app2"></a>
<div id="req-container-app3" class="invisible">
    [Requirements are listed here]
</div>
<a id="app4"></a>
<div id="req-container-app4" class="invisible">
    [Requirements are listed here]
</div>

我有每个应用的目标网页。它们包含指向需求页面的链接，包括锚点，如example.com/info/requirements#app3

现在，我正在寻找一种方法 - 使用JS / jQuery - 在访问页面时检查#anchor是否存在，然后可以触发我的openReqDiv('#app3');函数。< / p>

任何人都可以指出我正确的方向，何时，何地以及如何检查锚点并触发我的脚本？谢谢！

Answer 1

这个东西叫做路由。你的方法很简单，但不用担心。只是做：

var hash = window.location.hash;
switch(hash){
    case '#app2':
        $("#app2").removeClass('invisible');
        break;
}

但是，最终您需要检测哈希值的更改。只需使用https://github.com/asual/jquery-address等插件即可。另一种选择是使用某种框架（棱角分明，余烬......）

Answer 2

您可以通过此jQuery解决方案检查DOM元素的存在：

if($('#anchor').length > 0) {
    openReqDiv('#app3');
}

Answer 3

您可以使用document.location.href方法使用Javascript实现此目的。

示例：

// When the page loads...
$( document ).ready(function() {
    // Check if the hash is in the URL
    if ( document.location.href.indexOf('requirements#app3') > -1 ) {
        // Init your function
        openReqDiv('#app3');
    }
});

您可以修改此功能并将其绑定到window.load事件。因此，一旦用户登陆页面，您的功能就会被执行。

祝你好运！

根据url中的#anchor执行/触发脚本？

3 个答案: