新页面加载后的jQuery点击事件

Question

我有一个使用 Node/Express/Handlebars 的网络项目

我在侧面有一个粘性导航，它是通过部分手把呈现的。

当单击链接并加载页面时，我希望活动状态更改为被单击的元素。我已经尝试过 .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

我不确定您尝试做的事情是否可行..

如果页面重新加载，您将丢失任何未备份的状态。 所以你需要某种数据源或会话。

如果不需要页面重新加载，可以“return false;”在您的点击功能结束时，这应该可以防止页面重新加载并为您提供您正在寻找的类更改。

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

$(function () { your code here }) 

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

location.href

Answer 2

HTTP is stateless.

任何时候刷新页面，它的状态都会丢失，并且您的页面不知道它在哪里。所以，你需要想办法在你的页面中保持状态。

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

更多方法可以在this discussion找到。

Answer 3

你不能这样做，因为当页面重新加载时，它是一个全新的 HTTP 请求，它会丢失上一个页面上执行的最后一个请求。您可以做的是基于您可以使用服务器端脚本设置 class= "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":"" ?>" >