添加js代码，在点击导航栏标题时切换显示不同的列表内容

在HTML和JavaScript中，你可以通过给导航栏标题添加`onclick`事件监听器来实现点击切换列表内容的功能。下面是一个简单的示例：

首先，假设你有以下几个导航链接对应不同的列表容器：

<nav>
  <ul>
    <li><a href="#list1" id="nav-item1">列表1</a></li>
    <li><a href="#list2" id="nav-item2">列表2</a></li>
    <!-- 更多导航链接... -->
  </ul>
</nav>

<div id="list1" class="hidden">
  <!-- 列表1的内容 -->
</div>

<div id="list2" class="hidden">
  <!-- 列表2的内容 -->
</div>

然后在JavaScript部分：

// 获取所有的导航项和对应的列表
const navItems = document.querySelectorAll('nav a');
const listContainers = document.querySelectorAll('.hidden');

// 遍历每个导航项
navItems.forEach((item) => {
  item.addEventListener('click', (e) => {
    // 阻止默认的链接跳转行为
    e.preventDefault();

    // 获取当前点击的导航项ID
    const clickedListId = e.target.getAttribute('href').substring(1);

    // 隐藏所有已显示的列表
    for (let i = 0; i < listContainers.length; i++) {
      listContainers[i].classList.add('hidden');
    }

    // 显示对应点击的列表
    document.getElementById(clickedListId).classList.remove('hidden');
  });
});

在这个例子中，当用户点击导航栏中的某一项时，它会阻止页面的默认跳转，并隐藏除了当前选择之外的所有列表。然后会选择并显示与所点击链接关联的列表。