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

How to dynamically add/remove .current class to each nav link that is clicked using multiple .html pages?

本文关键字：添加 动态 链接 导航 删除 html 单击      更新时间：2023-09-26

简介

我正在尝试创建一个示例标题导航，它将当前类动态添加到单击的每个菜单链接中。我正在尝试使用JavaScript和/或带有多个.html页面的jQuery来实现这一点。

要查找的已知错误

现在，当前类只是在单击链接时短暂闪烁，但会立即删除。

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

问题

是否可以在每个链接中动态添加/删除.current类是使用多个.html页面点击的，还是我会最好使用MVC或angular.js这样的框架？

将jQuery引用脚本放在页面就在结束正文标记之前？

样本项目

我的标题导航如下：

<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

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

您可以在会话存储、本地存储和Cookie之间选择几个选项。

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

会话存储仅存储当前会话的信息。如果用户关闭该窗口，则该存储将被清除。对于您的场景来说，这可能是最实用的。

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

如果您不能写入页面，(在这种情况下，我会使用html5数据-任何属性来保持值，使用.dataset-任何属性进行检索(。你可以做的是在你的url上使用"#"锚，然后用javascript检索它。个人客户端设置的常规但稳健的方式是使用cookie。

相关文章：