如何在使用多个.html页面单击的每个导航链接中动态添加/删除.current类？

Question

概要

我正在尝试创建一个示例标题导航，该导航将.current类动态添加到所单击的每个菜单链接。 我正在尝试使用JavaScript和/或具有多个.html页面的jQuery完成此操作。

要研究的已知错误

现在，单击链接时，.current类仅会短暂闪烁，但会立即删除。

单击导航链接的已记录消息不会保留在控制台中。 当前短暂闪烁，然后立即删除。

问题

是否可以向使用多个.html页面单击的每个链接动态添加/删除.current类，还是最好使用MVC之类的东西或诸如angular.js之类的框架？

将jQuery参考脚本放在页面底部，紧接在body标记之前会更好吗？

样例项目

我的标题导航如下所示：

<nav>
  <ul id="headerNav">
    <li>
      <a id="home" class="headerLink" href="index.html">Home</a>
    </li>
    <li>
      <a id="about" class="headerLink" href="about.html">About</a>
    </li>
  </ul>
</nav>

我的script.js文件如下所示。

/*jslint browser: true*/
/*global document, window, $, jQuery, alert, console, require, logger*/

$(document).ready(function () {
  'use strict';
  console.log("dom is ready!");
  initHeaderNavLinks();
});

function initHeaderNavLinks() {
  console.log("initializing header nav links...");

  // add current class to first link in header navigation
  $('#headerNav li:first a').addClass("current");
}

$('.headerLink').click(function() {
  var clickedId = $(this).attr('id');
  var msg = "";
  msg = "clickedId: " + clickedId;
  console.log(msg);
  $(this).addClass('current');
});

这是我在Plunker中的示例项目。 https://plnkr.co:443/pVPDBfjmhqaIwnMEtMgm

更新

对于那些感兴趣的人，我找到了一个最适合我当前需求并简化代码的解决方案。 我决定将currentPageID变量直接嵌入脚本标记中的每个页面上。

更新项目

将此脚本标签添加到每个页面的开头

<script>
  var currentPageID = "about";
</script>

我的标题导航现在如下所示：

<nav>
  <ul>
    <li>
      <a id="home" href="index.html">Home</a>
    </li>
    <li>
      <a id="about" href="about.html">About</a>
    </li>
  </ul>
</nav>

我的script.js文件如下所示。

/*jslint browser: true*/
/*global document, window, $, jQuery, alert, console, require, logger*/

$(document).ready(function () {
  'use strict';
  console.log("dom is ready!");
  console.log("currentPageID: " + currentPageID);

  $("#" + currentPageID).addClass('current');
});

这是我更新的Plunker项目https://plnkr.co/pVPDBfjmhqaIwnMEtMgm

Answer 1

如果您无法写入页面，（在这种情况下，我将使用html5 data-whatever属性来保留值，并使用.dataset.whatever进行检索）。 您可以做的是在网址上使用“＃”锚，然后使用javascript检索它。 而且，用于个人客户端设置的常规的旧的但可靠的方法是确保使用cookie。

Answer 2

由于您将离开当前页面，因此需要某种形式的持久性。

您可以在会话存储，本地存储和Cookies之间进行选择。

Cookies是网页持久化的老式方式，通常大多数浏览器都支持它们。

会话存储仅存储当前会话的信息。 如果用户关闭窗口，则清除此存储。 对于您的方案，这可能是最实用的。

另一方面， 本地存储的功能与会话存储相同，但是必须显式删除本地存储中的项目，或者清除缓存。