html点击div切换对应的页面

你可以使用 JavaScript 来实现点击 div 切换对应的页面。以下是一个简单的示例代码：

HTML 代码：

<div class="tab" onclick="openPage('page1')">页面 1</div>
<div class="tab" onclick="openPage('page2')">页面 2</div>

<div id="page1" class="page">
  <h1>页面 1</h1>
  <p>这是页面 1 的内容。</p>
</div>

<div id="page2" class="page">
  <h1>页面 2</h1>
  <p>这是页面 2 的内容。</p>
</div>

JavaScript 代码：

function openPage(pageName) {
  var i;
  var pages = document.getElementsByClassName("page");
  for (i = 0; i < pages.length; i++) {
    pages[i].style.display = "none";
  }
  document.getElementById(pageName).style.display = "block";
}

CSS 代码：

.tab {
  cursor: pointer;
}

.page {
  display: none;
}

在这个示例中，我们创建了两个 div 元素，它们具有相同的 class 名称 "tab"。每个 div 元素在 onclick 事件中都调用 openPage() 函数，并传递不同的参数：'page1' 或 'page2'。

在 JavaScript 中，openPage() 函数接受一个 pageName 参数。它首先隐藏所有具有 "page" class 名称的元素，然后显示具有与传递给函数的 pageName 参数相同的 id 名称的元素。

CSS 中，我们将 "tab" class 名称的元素的光标设置为指针，以使其看起来像链接。我们还将 "page" class 名称的元素隐藏起来，以便在单击 div 元素时可以切换它们的可见性。