【css+JavaScript 】关于链接选中且通过 js 设置持久的选中状态

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。如果有，就恢复选中状态。

 <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');
                // 保存选中状态到 localStorage
                localStorage.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>

原文地址：https://blog.csdn.net/qq_52265298/article/details/143749181

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！