html5如何实现点击上面横向导航栏的每一个链接，下面的<div>的内容都不同

在HTML5中，要实现点击上面的横向导航栏链接，导致下方的`<div>`内容变化，你可以结合HTML、CSS和JavaScript（通常用jQuery或原生JS）来完成这个交互。以下是一个基本的步骤：

1. **HTML结构**:
创建一个导航栏和对应的`<div>`区域。每个导航链接关联一个唯一的ID，用于对应下面的`<div>`内容。

<nav id="navbar">
  <ul>
    <li><a href="#section1" class="nav-link">链接1</a></li>
    <li><a href="#section2" class="nav-link">链接2</a></li>
    <!-- 添加更多的链接 -->
  </ul>
</nav>

<div id="content">
  <div id="section1">内容1</div>
  <div id="section2">内容2</div>
  <!-- 预备其他可能显示的内容 -->
</div>

2. **CSS**:
为导航栏和内容区域添加样式，使其看起来像横向导航。

#navbar ul {
  list-style-type: none;
  display: flex;
}

.nav-link {
  /* 样式 */
}

3. **JavaScript (jQuery示例)**:
使用`.click()`事件监听导航链接，并根据当前选中的链接切换相应`<div>`内容。

$(document).ready(function() {
  $('#navbar a.nav-link').click(function(e) {
    e.preventDefault(); // 阻止默认的页面跳转
    var targetId = $(this).attr('href'); // 获取目标ID
    $('#content > div').hide(); // 先隐藏所有内容
    $('#' + targetId).show(); // 显示对应的目标内容
  });
});