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

在jQuery中制作这样的导航菜单，你可以按照以下步骤进行：

1. **HTML结构**：首先，构建一个包含多个选项的导航列表，每个选项都附带一个锚点和一个隐藏的内容区域：

<nav class="menu">
  <ul id="primary-menu">
    <li><a href="#section1" class="active">选项1</a>
      <div class="content hidden" id="section1-content">
        <!-- 内容1 -->
      </div>
    </li>
    <!-- 添加更多选项 ... -->
  </ul>
</nav>

2. **CSS样式**：设置初始样式和激活状态的样式，以及隐藏内容的样式：

.active {
  background-color: #ccc;
  /* 其他高亮样式 */
}

.hidden {
  display: none;
}

3. **jQuery脚本**：

$(document).ready(function() {
  // 初始化，隐藏所有内容
  $(".content").hide();

  // 点击导航选项
  $("#primary-menu li a").click(function(e) {
    e.preventDefault(); // 阻止默认链接跳转

    // 获取当前选项
    var $this = $(this),
        contentId = $this.attr("href"),
        activeClass = "active";

    // 改变点击项样式并显示其内容
    $this.siblings().removeClass(activeClass);
    $this.addClass(activeClass);

    // 隐藏所有内容，显示当前选项的内容
    $(".content").slideUp();
    $("#" + contentId).slideDown();

    // 如果是首次点击，确保只有第一个内容区显示
    if (!$this.parent().hasClass(activeClass)) {
      $(".content").not("#" + contentId).slideUp();
    }
  });
});

这个脚本会在用户点击导航选项时，切换当前选项的样式使其突出，并显示对应的内容。首次点击会隐藏所有其他内容，后续点击只会切换当前显示的内容。