2

我正在开发的网站在每个页面的页脚中都有一个链接列表。这些链接附加了锚点，如下所示：

<ul>
    <li class="lines exp"><a href="services.html#sa">Service A</a></li>
    <li class="lines exp"><a href="services.html#sb">Service B</a></li>
    <li class="lines exp"><a href="services.html#sc">Service C</a></li>
</ul>

在这些链接的“services.html”目标页面上，有一系列切换样式的 div，每个 div 对应于上述锚定链接，如下所示：

<div id="sa" class="toggle-trigger">
    <h3 class="services-title">
        <a class="toggle-text">Service A</a>
    </h3>
</div>
<div class="toggle-container">
    <p>Lorem ipsum sit dolorem.</p>
</div>
<div id="sb" class="toggle-trigger">
    <h3 class="services-title">
        <a class="toggle-text">Service B</a>
    </h3>
</div>
<div class="toggle-container">
    <p>Lorem ipsum sit dolorem.</p>
</div>
<div id="sc" class="toggle-trigger">
    <h3 class="services-title">
        <a class="toggle-text">Service C</a>
    </h3>
</div>
<div class="toggle-container">
    <p>Lorem ipsum sit dolorem.</p>
</div>

最终目标是让页脚链接通过模拟点击事件激活其目标“toggle-trigger”div，这将在加载“services.html”页面后切换打开关联的“toggle-container”div。

为此，我在正文末尾的“services.html”中添加了以下 JavaScript / jQuery，因为它应该只在页面准备好后触发：

<script type="text/javascript">
    $( document ).ready(function() {
        var target = document.URL;
        var regex = /services\.html#[a-z]{2}$/;
        var result = regex.exec(target);
        console.log("Target / Regex / Result: " + target + " / " + regex + " / " + result);
        if (result) {
            var divID = /#[a-z]{2}/.exec(result);
            console.log("divID: " + divID[0]);
            $(divID[0]).delay(1000).trigger('click');
        }
    });
    $(".exp").click(function() {
        var target = window.location.hash;
        console.log("Target: " + target);
        $(target).delay(1000).trigger('click');
    });
</script>

我添加了第二个函数，因为result单击同一页面内的锚定链接时，第一个函数中的变量始终为空。

目前，这完全符合我在单击其他网站页面上的页脚链接时想要的方式。但是，当我已经在“services.html”页面上并单击同一页面上的一个页脚链接时，它在我第一次单击时不起作用，而是在第二次单击锚定链接时起作用。

无论单击页脚链接的页面如何，所需的行为当然是它的工作方式相同。

我究竟做错了什么？

4

1 回答 1

0

我看到它的方式......当您已经在 services.html 页面上时，有些东西表现得很糟糕。这可能是 href="services.html#sa"。虽然我不知道到底有什么问题，但我建议您以不同的方式检索您的“#anchor”。

就像是

$(".exp").click(function(){
  $a = $(this).find("a").first() ;
  href = $a.attr('href') ;
  // parse the href to retrieve #anchor
}) ;

这样，您就不会依赖 window.location... 当您已经在 services.html 上时，它可能表现不佳。

于 2013-09-19T20:16:27.060 回答