导航添加Cookie保存状态实例
好的,根据您的要求,可以使用以下的实现方法:
HTML
首先在 HTML 文件中,定义需要保存选中状态的导航链接,并为它们添加 data-nav
属性,以便在 JavaScript 中使用。
<nav>
<a href="/" data-nav="home">Home</a>
<a href="/about" data-nav="about">About</a>
<a href="/contact" data-nav="contact">Contact</a>
</nav>
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");
});
}
上述代码中首先实现了 saveSelectedNav
和 getSelectedNav
这两个函数,分别用来设置和获取名为 selectedNav
的 cookie,保存了选中的导航的 ID。设置 Cookie 的时候,为了让 Cookie 在整个网站有效,使用了 path=/
的参数。读取 cookie 时,通过 getSelectedNav()
函数来获取 selectedNav
的值。
在初始化页面时,可以获取 selectedNav
的值,如果 cookie 中保存的选中导航存在,则将对应的导航设置为选中状态。
然后通过遍历所有导航链接,并添加 click
事件,点击时更新 cookie 中的 selectedNav
Cookie,同时也会更新选中导航的样式。
发表评论
热门文章
Spimes主题专为博客、自媒体、资讯类的网站设计....
一款个人简历主题,可以简单搭建一下,具体也比较简单....
仿制主题,Typecho博客主题,昼夜双版设计,可....
用于作品展示、资源下载,行业垂直性网站、个人博客,....
热评文章
最新评论
Z.
11月29日
博主你好,Deng插件,这个点击不进去,提示这个(Warning: require_once(/www/wwwroot/w.zzy2020.com/usr/plugins/Deng/Deng/html/profile.php): failed to open stream: No such file or directory in /www/wwwroot/w.zzy2020.com/Fresh/extending.php on line 26
Fatal error: require_once(): Failed opening required '/www/wwwroot/w.zzy2020.com/usr/plugins/Deng/Deng/html/profile.php' (include_path='.:/www/server/php/72/lib/php') in /www/wwwroot/w.zzy2020.com/Fresh/extending.php on line 26)
点都德
3天前
:喷::喜欢::怒::黑线: