使用JavaScript显示选项卡(1)

📌 相关文章

📜 使用JavaScript显示选项卡(1)

📅 最后修改于: 2023-12-03 15:36:35.643000 🧑 作者: Mango

使用JavaScript显示选项卡

选项卡（Tabs）是常用的网页导航方式之一。在Web开发中，我们可以使用JavaScript来实现选项卡的显示。本文将介绍如何使用JavaScript来创建选项卡。

HTML结构

首先，我们需要使用HTML来创建选项卡的结构。我们可以使用<ul>和<li>来创建选项卡的标签，在每个<li>中放置一个链接标签(<a>)，并将它们的href属性设置为相应的内容区块的ID。

<ul class="tabs">
  <li><a href="#tab1">Tab 1</a></li>
  <li><a href="#tab2">Tab 2</a></li>
  <li><a href="#tab3">Tab 3</a></li>
</ul>

<div id="tab1">Content for tab 1 goes here.</div>
<div id="tab2">Content for tab 2 goes here.</div>
<div id="tab3">Content for tab 3 goes here.</div>

JavaScript代码

获取DOM元素

我们需要使用JavaScript代码来获取选项卡和其内容区块的DOM元素。这可以通过使用document.querySelector()方法来实现。在下面的代码示例中，我们使用一个变量tabs来获取<ul>元素，使用另一个变量tabContents来获取选项卡内容区块。

const tabs = document.querySelector(".tabs");
const tabContents = document.querySelectorAll("[id^=tab]");

监听事件

我们需要使用JavaScript代码来监听选项卡的单击事件。当用户单击选项卡时，JavaScript会从事件对象(event)中获取目标元素(target)，并把目标元素与选项卡内容区块进行比较。如果目标元素为选项卡，则显示与之对应的内容区块。

tabs.addEventListener("click", function(event) {
  const target = event.target;
  if (target.tagName === "A") {
    const tabName = target.getAttribute("href");
    const targetTab = document.querySelector(tabName);
    targetTab.style.display = "block";
    tabContents.forEach(function(tab) {
      if (tab.id !== targetTab.id) {
        tab.style.display = "none";
      }
    });
  }
});

在上述代码中，我们定义了一个匿名函数作为选项卡单击事件的处理程序。在事件处理程序中，我们首先获取单击事件的目标元素。如果目标元素为一个<a>元素，则获取它的href属性。我们可以使用这个属性来找到与该选项卡对应的内容区块。

然后，我们遍历每个选项卡内容区块，并根据它们的ID来决定哪个区块需要显示。如果当前区块是与目标选项卡对应的区块，那么我们将其设为可见的，否则我们将其设为隐藏的。

CSS样式

最后，我们需要使用CSS样式来调整选项卡的外观。在下面的代码示例中，我们设置了选项卡的样式，以及当鼠标指针悬停在选项卡上时的效果。

.tabs {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tabs li {
  display: inline-block;
  margin-right: 1em;
}

.tabs li a {
  color: #000;
  text-decoration: none;
}

.tabs li a:hover {
  text-decoration: underline;
  cursor: pointer;
}

完整代码示例

下面是使用HTML、JavaScript和CSS来创建选项卡的完整代码示例。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tabs Example</title>
  <style>
    .tabs {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .tabs li {
      display: inline-block;
      margin-right: 1em;
    }

    .tabs li a {
      color: #000;
      text-decoration: none;
    }

    .tabs li a:hover {
      text-decoration: underline;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <ul class="tabs">
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
  </ul>

  <div id="tab1">Content for tab 1 goes here.</div>
  <div id="tab2">Content for tab 2 goes here.</div>
  <div id="tab3">Content for tab 3 goes here.</div>

  <script>
    const tabs = document.querySelector(".tabs");
    const tabContents = document.querySelectorAll("[id^=tab]");
    
    tabs.addEventListener("click", function(event) {
      const target = event.target;
      if (target.tagName === "A") {
        const tabName = target.getAttribute("href");
        const targetTab = document.querySelector(tabName);
        targetTab.style.display = "block";
        tabContents.forEach(function(tab) {
          if (tab.id !== targetTab.id) {
            tab.style.display = "none";
          }
        });
      }
    });
  </script>
</body>
</html>

这样，我们就使用JavaScript创建了一个简单的选项卡。可以将代码复制到任何HTML页面中测试。