1、点击后选中状态保持：当你点击任意链接时，它的颜色变为红色，并且页面刷新后仍然保留选中状态。
2、页面刷新后保持选中：即使刷新页面，选中的链接也能通过 localStorage 恢复，确保用户的选中状态持续存在。
html代码示例：当你点击任意一个链接时，它的颜色会变为红色，而其他的链接颜色保持蓝色。
<header><nav><ul><li><a href="status.html" id="status">Status</a></li><li><a href="ipSettings.html" id="ipSettings">IP Settings</a></li><li><a href="rtsp.html" id="rtsp">RTSP</a></li><li><a href="system.html" id="system">System</a></li></ul></nav></header>css+js代码：用 JavaScript 动态添加或移除 .active 类来改变被点击的链接样式。
1、DOMContentLoaded 事件中，我们为每个链接添加了 click 事件监听器。当用户点击链接时，调用 setActiveLink 函数来设置选中状态。
2、setActiveLink 会清除所有链接的 active 类，确保只有一个链接处于选中状态。然后将当前点击的链接的 id 保存在 localStorage 中。
3、页面加载时会检查 localStorage 中是否有已保存的选中链接的 id。如果有，就恢复选中状态。
javascript"> <style>/* 默认链接样式 */nav ul li a {color: blue;text-decoration: none;padding: 10px;display: inline-block;}/* 被点击后的链接样式 */nav ul li a.active {color: red; /* 点击后变红 */text-decoration: underline; /* 点击后添加下划线 */}/* 如果需要，可以添加 hover 样式 */nav ul li a:hover {text-decoration: underline;}</style><script>document.addEventListener('DOMContentLoaded', function() {const links = document.querySelectorAll('nav ul li a');// 函数：为链接添加 active 类，保持选中状态function setActiveLink(link) {// 清除所有链接的 active 类links.forEach(function(otherLink) {otherLink.classList.remove('active');});// 为当前点击的链接添加 active 类link.classList.add('active');// 保存选中状态到 localStoragelocalStorage.setItem('activeLink', link.id);}// 加载页面时，根据 localStorage 恢复选中状态const activeLinkId = localStorage.getItem('activeLink');if (activeLinkId) {const activeLink = document.getElementById(activeLinkId);if (activeLink) {setActiveLink(activeLink);}}// 为每个链接添加点击事件links.forEach(function(link) {link.addEventListener('click', function(event) {setActiveLink(event.target);});});});</script>
