execute/trigger 脚本依赖于 url 中的#anchor？

Question

我有一个中央页面 example.com/info/requirements，其中包含运行不同应用程序的要求。默认只显示旗舰应用要求的div，用户可以点击按钮切换on/off不同的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>

我为每个应用程序都有一个登录页面。它们包含 link 到包含锚点的要求页面，例如 example.com/info/requirements#app3

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

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

Answer 1

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

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

Answer 2

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

示例：

// 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 事件。因此，一旦用户登陆页面，您的功能就会被执行。

祝你好运！

Answer 3

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

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

但是，最终您会想要检测散列的更改。只需使用 https://github.com/asual/jquery-address 之类的插件即可。另一种选择是使用某种框架(angular, ember...)

execute/trigger 脚本依赖于 url 中的#anchor？

execute/trigger a script depending on #anchor in url?

html

javascript

anchor

jquery