HTML，css，JS页面菜单选中状态，且刷新不消失

HTML、CSS和JavaScript可以一起创建出交互式的网页效果，其中页面菜单选中状态通常通过以下步骤实现：

1. HTML结构：首先，你需要在HTML中定义一个菜单列表，每个菜单项包含一个链接元素（如`<a>`），并设置一个唯一的标识，比如`data-id`属性。

<nav>
  <ul id="menu">
    <li><a href="#" data-id="1">菜单1</a></li>
    <li><a href="#" data-id="2">菜单2</a></li>
    <!-- 更多菜单项... -->
  </ul>
</nav>

2. CSS样式：使用CSS来设置默认样式和激活（选中）状态。例如，你可以为`active`类添加背景色、字体颜色等样式，并设置当鼠标悬停或点击时添加这个类。

#menu a {
  display: inline-block;
}

#menu a.active {
  background-color: #e0e0e0;
  color: blue;
}

3. JavaScript逻辑：通过JavaScript监听用户的行为，当某个菜单项被点击时，动态地为它添加或移除`active`类，以便更新样式。

document.getElementById('menu').addEventListener('click', function(e) {
  const target = e.target;
  
  if (target.tagName === 'A') {
    removeActiveClass();
    target.classList.add('active');
  }
});

function removeActiveClass() {
  document.querySelectorAll('#menu a.active').forEach(link => link.classList.remove('active'));
}

当你刷新页面时，因为JavaScript是运行在浏览器端的，所以需要在用户交互触发时手动恢复默认样式。为了实现这一点，你可以在JavaScript里保存菜单的状态，然后在加载页面时根据这些信息来调整样式。