好的,根据您的要求,可以使用以下的实现方法:

HTML

首先在 HTML 文件中,定义需要保存选中状态的导航链接,并为它们添加 data-nav 属性,以便在 JavaScript 中使用。

JavaScript

然后,在 JavaScript 文件中,可以实现如下的代码来保存和读取 cookie。

// 保存选中的导航到 cookie
function saveSelectedNav(navId) {
  document.cookie = "selectedNav=" + navId + ";path=/";
}

// 获取 cookie 中保存的选中导航
function getSelectedNav() {
  var name = "selectedNav=";
  var ca = document.cookie.split(';');
  for(var i = 0; i < ca.length; i++) {
 var c = ca[i];
 while (c.charAt(0) === ' ') {
c = c.substring(1);
 }
 if (c.indexOf(name) === 0) {
return c.substring(name.length, c.length);
 }
  }
  return "";
}

// 设置初始选中的导航
var selectedNavId = getSelectedNav();
if (selectedNavId !== "") {
  var selectedNav = document.querySelector("[data-nav='" + selectedNavId + "']");
  if (selectedNav) {
 selectedNav.classList.add("active");
  }
}

// 给导航链接加上点击事件,保存选中的导航到 cookie
var navLinks = document.querySelectorAll("nav a");
for (var i = 0; i < navLinks.length; i++) {
  navLinks[i].addEventListener("click", function(event) {
 var navId = event.target.getAttribute("data-nav");
 saveSelectedNav(navId);

 // 取消之前选中的导航的样式,设置当前选中的导航的样式
 var selectedNav = document.querySelector("nav .active");
 if (selectedNav) {
selectedNav.classList.remove("active");
 }
 event.target.classList.add("active");
  });
}

上述代码中首先实现了 saveSelectedNavgetSelectedNav 这两个函数,分别用来设置和获取名为 selectedNav 的 cookie,保存了选中的导航的 ID。设置 Cookie 的时候,为了让 Cookie 在整个网站有效,使用了 path=/ 的参数。读取 cookie 时,通过 getSelectedNav() 函数来获取 selectedNav 的值。

在初始化页面时,可以获取 selectedNav 的值,如果 cookie 中保存的选中导航存在,则将对应的导航设置为选中状态。

然后通过遍历所有导航链接,并添加 click 事件,点击时更新 cookie 中的 selectedNav Cookie,同时也会更新选中导航的样式。

!如链接失效请在下方留言。本站所有资源均来源于网络,版权属于原作者!仅供学习参考,本站不对您的使用负任何责任。如果有侵权之处请第一时间联系我们删除,敬请谅解!