时间戳

首页 > 解决方案 > 根据哈希中的内容打开 html 部分

javascript - 根据哈希中的内容打开 html 部分

问题描述

正如标题所说，我正在尝试打开一个与 url 哈希匹配的部分。我的代码有效，但它被窃听了，我不知道该怎么办了。

在这里，我有以下导航栏：

<li class="navigation-li">
   <a href="#" name="about" class="navigation-a section-to" data-page-section="#about">
      <span class="text-line-wrp">
         <span class="text">Sobre Nós</span>
         <span class="line"></span>
      </span>
      <span class="icon iconwrp square-40"><i class="pe-7s-home"></i></span>
   </a>
</li>

<li class="navigation-li">
   <a href="#" name="services" class="navigation-a section-to" data-page-section="#services">
        <span class="text-line-wrp">
           <span class="text">Serviços</span>
           <span class="line"></span>
        </span>
        <span class="icon iconwrp square-40"><i class="pe-7s-config"></i></span>
   </a>
</li>

每个“li”都会打开一个部分，并且该代码已经开发并可以运行，但是，我无法使用哈希打开它，它可以工作，但是即使我只调用一个，它也会打开其他部分。

根据哈希打开部分的代码：

    <script>
    $(document).ready(function() {

        var hash = window.location.hash.substr(1)

        setTimeout(function() {
            if (hash) {
                e = document.createEvent('MouseEvents');
                e.initEvent("click", true, true);
                $('a[data-page-section="#' + hash + '"]')[0].dispatchEvent(e) //open section accordingly to shash
            } else {
                console.log("no hash")
            }
        }, 1000);
    });
</script>

此外，如果我来自另一个页面，所有部分都将打开，如果我关闭并重新打开，所有部分将打开并重新打开。

我希望你能理解这一点，并提前感谢你。

标签： javascripthtmljquery

解决方案

您可以尝试使用Element.scrollIntoView()而不是尝试模拟点击。

$(document).ready(function() {
    var hash = window.location.hash;
    $('a[data-page-section="' + hash + '"]').get(0).scrollIntoView(true)
});

推荐阅读