新页面加载后，请点击事件

Question

我使用node/express/handlebars

我有一个Web项目

我的侧面有一个棘手的导航，该导航是通过handelbars部分渲染的。

单击链接并且页面加载时，我希望活动状态更改为单击的元素。我已经尝试了.click()和.on('click', child, callback)。当我单击它时，它可以工作，但是在DOM重新加载后重置。

感谢您的帮助stackoverflow。

这是我的jQuery：

//NAVIGATION ACTIVES
$('.stickynav').on('click', '.platform-nav',
  function() {
    $('.main-hand').removeClass("nav-active");
    $('.sticky-hand').removeClass("nav-active");
    $(this).addClass("nav-active");
  });
$('.stickynav').on('click', '.tools-nav',
  function() {
    $('.main-hand').removeClass("nav-active");
    $('.sticky-hand').removeClass("nav-active");
    $(this).addClass("nav-active");
  });
$('.stickynav').on('click', '.diensten-nav',
  function() {
    $('.main-hand').removeClass("nav-active");
    $('.sticky-hand').removeClass("nav-active");
    $(this).addClass("nav-active");
  });
$('.stickynav').on('click', '.blog-nav',
  function() {
    $('.main-hand').removeClass("nav-active");
    $('.sticky-hand').removeClass("nav-active");
    $(this).addClass("nav-active");
  });

和html（.hbs）：

<div class="stickynav" data-spy="affix">
  <div class="hands-connector">
        <img src='/img/connector-sticky.png'  />
  </div>

<div class="hands-sticky">
  <div class="sticky-hand platform-nav nav-active" id="platform-sticky">
    <a href="/">        <img src="/img/platform-sticky.png" alt="Naar kennisplatform" />
            <p>Kennisplatform</p></a>
  </div>
  <div class="sticky-hand tools-nav" id="tools-sticky">
    <a href="/tools">
        <img src="/img/tools-sticky.png" alt="Naar gratis tools" />
        <p>
          Tools
        </p>
      </a>
  </div>
  <div class="sticky-hand diensten-nav" id="diensten-sticky">
    <a href="/diensten">
        <img src="/img/diensten-sticky.png" alt="Naar diensten" />
        <p>
          Diensten
        </p>
    </a>
  </div>
  <div class="sticky-hand blog-nav" id="blog-sticky">
    <a href="/blog?page=1">
        <img src="/img/blog-sticky.png" alt="Naar blog" />
      <p>
        Blog
      </p>
    </a>
  </div>
</div>
</div>

和用于参考的CSS类（禁用链接）：

.nav-active {
  text-decoration:none;
  color:black;
  -webkit-filter: drop-shadow(1px 1px 0 blue) drop-shadow(-1px -1px 0 blue);
  -ms-filter: drop-shadow(1px 1px 0 blue) drop-shadow(-1px -1px 0 blue);
  filter: drop-shadow(1px 1px 0 blue) drop-shadow(-1px -1px 0 blue);
  pointer-events:none;
  cursor:default;
}

Answer 1

我不确定您要做的是可能的。

如果页面重新加载，您将失去任何没有以某种方式备份的状态。因此，您需要某种数据源或会话。

如果您不需要页面重新加载，则可以"返回false;"；在点击函数结束时，这将阻止页面重新加载并为您提供所需的类更改。

如果您的点击事件正在更改路由，我建议一个脚本在页面加载完成后运行（文档准备就绪）

$(function () { your code here }) 

检查当前路由并根据路线设置CSS类。（而不是基于单击的内容，因为您会在页面加载上丢失该信息，但您仍然会有路线。）

location.href

Answer 2

http是无状态的。

任何时候刷新页面，其状态丢失，您的页面不知道它在哪里。因此，您需要找出一种跨页面持续状态的方法。

例如，您可以使用浏览器的此API在本地存储中坚持状态。对于主机名，本地存储是持续的。因此，每当单击链接时，您都可以将其详细信息存储在本地存储中，当您的DOM再次准备就绪时，您可以从本地存储中读取相同的值并使该链接处于活动状态。

在此讨论中可以找到更多的方法。

Answer 3

您不能这样做，因为当页面重新加载时，它是一个完整的新HTTP请求，它将放松上一页上的最后一个。您可以做的是基于您可以使用服务器侧脚本设置类=" nav-Active"的URL，例如使用PHP，然后您可以尝试

之类的东西

设置$ page ="平台"

并且在编写HTML时可以添加

<div class="sticky-hand tools-nav" id="tools-sticky" class="<?php ($page=='tools')?"active":"" ?>" >
<div class="sticky-hand platform-nav" id="tools-sticky" class="<?php ($page=='platform')?"active":"" ?>" >