如何关闭每个选项卡的边缘窗口

介绍

在许多应用程序中，选项卡通常会显示一个关闭按钮，以允许用户关闭该特定选项卡。对于Web应用程序而言，我们可以通过编写JavaScript代码来实现此目标。

代码示例

以下是实现关闭每个选项卡的边缘窗口的示例代码：

<!-- HTML代码 -->
<div class="tab">
  <button class="tablink" id="tab1" onclick="openTab(event,'content1')">Tab 1</button>
  <button class="tablink" id="tab2" onclick="openTab(event,'content2')">Tab 2</button>
  <button class="tablink" id="tab3" onclick="openTab(event,'content3')">Tab 3</button>
</div>

<div id="content1" class="tabcontent">
  <h3>Content 1</h3>
  <p>Some text..</p>
</div>

<div id="content2" class="tabcontent">
  <h3>Content 2</h3>
  <p>Some text..</p>
</div>

<div id="content3" class="tabcontent">
  <h3>Content 3</h3>
  <p>Some text..</p>
</div>

<script>
  // JavaScript代码
  function openTab(evt, tabName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablink");
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
  }

  var closebtns = document.getElementsByClassName("tablink");
  var i;

  for (i = 0; i < closebtns.length; i++) {
    closebtns[i].addEventListener("click", function() {
      this.parentElement.style.display = 'none';
    });
  }
</script>

代码解释

在上面的HTML代码中，我们创建了一个包含三个按钮的div元素，并设置每个按钮的id属性和onclick属性。我们还在每个按钮下方创建了一个div元素，用于存储与该按钮相关联的内容。该内容具有唯一的id，以便在JavaScript中操作。

在JavaScript中，我们定义了一个名为openTab的函数，它将显示与用户单击的选项卡相关联的内容，并将选项卡的样式设置为“active”。我们还定义了一个名为closebtns的变量，该变量包含所有选项卡按钮。对于每个按钮，我们使用addEventListener函数添加了一个单击事件侦听器。此事件侦听器将隐藏与该按钮相关联的内容。

结论

通过以上代码示例，我们可以在Web应用程序中轻松地实现关闭每个选项卡的边缘窗口。此外，请注意，我们可以通过添加必要的HTML和CSS来定制关闭按钮的外观。