html中点击导航选项如何切换页面内容

您可以使用 JavaScript 或 jQuery 来实现此操作。您可以在导航选项的 HTML 元素上添加一个 onclick 事件，当用户点击该元素时，该事件将执行 JavaScript 函数。在该函数内部，您可以使用 DOM 操作来找到要切换的页面内容，并将其显示在页面上。例如：

HTML:

<nav>
  <ul>
    <li onclick="showPage('home')">Home</li>
    <li onclick="showPage('about')">About</li>
    <li onclick="showPage('contact')">Contact</li>
  </ul>
</nav>

<div id="home-page">
  <h1>Welcome to my home page</h1>
</div>

<div id="about-page">
  <h1>About me</h1>
  <p>I am a web developer</p>
</div>

<div id="contact-page">
  <h1>Contact me</h1>
  <p>Email: john@example.com</p>
</div>

JavaScript:

function showPage(pageId) {
  // Hide all pages
  var pages = document.querySelectorAll('div[id$="-page"]');
  for (var i = 0; i < pages.length; i++) {
    pages[i].style.display = 'none';
  }
  
  // Show the selected page
  var page = document.getElementById(pageId + '-page');
  page.style.display = 'block';
}

在这个例子中，当用户点击导航选项时，showPage 函数将会被调用，该函数将会隐藏所有页面元素，然后只显示用户点击的页面元素。注意，每个页面元素的 ID 都必须以 "-page" 结尾，这样 JavaScript 才能找到这些元素。