导航制作 1、有五个以上选项 2、点击每个选项时 可以凸显当前点击选项（改变点击相样式，并且还原其他选项） 3、点击每个选项后显示对应内容（内容要对应改变 不可以只显示一个）

导航制作通常是指设计和实现一种用户界面元素，它通常包含多个选项，如菜单或者下拉列表，用于让用户选择他们想要的内容。为了满足您的需求，这里是一种基本的描述：

1. **设计模式**：你可以采用分层结构，比如使用HTML/CSS构建基础的导航栏，JavaScript负责交互效果。首先，创建一个包含多个`<a>`标签（代表选项）的容器。

<nav id="nav-container">
  <ul class="options">
    <li><a href="#option1">选项A</a></li>
    <li><a href="#option2">选项B</a></li>
    <!-- ... -->
    <li><a href="#option5">选项E</a></li>
  </ul>
</nav>

2. **CSS样式**：给`.options`添加默认样式，同时准备一个`:hover`伪类来改变选中项的外观，例如高亮背景色和文本颜色。

.options {
  list-style-type: none;
  padding: 0;
}

.options li a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
}

.options li a:hover {
  background-color: lightblue; /* 示例 */
}

3. **JavaScript处理**：利用JavaScript监听`<a>`的`click`事件，切换`active`类来凸显当前选项，并更新对应内容区域。这可以通过数据绑定或者操作DOM来实现。

const navItems = document.querySelectorAll('.options a');

navItems.forEach(item => {
  item.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认链接跳转
    
    const targetContent = document.getElementById(this.getAttribute('href').slice(1)); // 获取目标内容区
    targetContent.classList.add('active'); // 标记当前选项
    Array.from(navItems).forEach(i => i.classList.remove('active')); // 清除其他选项

    // 显示对应内容
    this.parentNode.querySelector('.content').innerText = targetContent.innerText;
  });
});

4. **显示对应内容**：为每个`<a>`标签关联一个`<div>`作为内容区域，内容区域初始隐藏(`display: none`)，点击相应选项时展示其内容。

<div class="content" style="display: none;">对应内容A</div>
<!-- ... -->
<div class="content" style="display: none;">对应内容E</div>