在页面刷新时保持第1节处于活动状态(Javascript+ css)

要在页面刷新时保持某个部分（例如第1节）处于活动状态，可以使用JavaScript和CSS来实现。以下是一个基本的实现方法：

基础概念

LocalStorage：一种在浏览器中存储数据的机制，数据在页面刷新后仍然存在。
CSS类：用于定义元素的样式。
JavaScript：用于操作DOM和处理事件。

实现步骤

使用LocalStorage记录当前活动的部分。
在页面加载时，读取LocalStorage中的数据，并根据数据设置相应的部分为活动状态。
使用CSS定义活动状态的样式。

示例代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>保持活动状态示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <section id="section1">第1节</section>
    <section id="section2">第2节</section>
    <section id="section3">第3节</section>

    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

.active {
    background-color: yellow;
}

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', function() {
    // 获取所有section元素
    const sections = document.querySelectorAll('section');

    // 从LocalStorage中读取当前活动的部分
    const activeSectionId = localStorage.getItem('activeSection');

    // 如果LocalStorage中有记录，则设置相应的部分为活动状态
    if (activeSectionId) {
        const activeSection = document.getElementById(activeSectionId);
        if (activeSection) {
            activeSection.classList.add('active');
        }
    }

    // 为每个section添加点击事件，记录当前活动的部分到LocalStorage
    sections.forEach(section => {
        section.addEventListener('click', function() {
            localStorage.setItem('activeSection', section.id);
            // 移除所有section的活动状态
            sections.forEach(sec => sec.classList.remove('active'));
            // 设置当前点击的部分为活动状态
            section.classList.add('active');
        });
    });
});