写一个tab-click方法如何知道当前点击的标签页的例子

当用户点击标签页时，通常会触发相应的事件。您可以使用JavaScript中的事件对象来获取有关此事件的信息，并确定哪个标签页已被点击。

以下是在常见情况下确定当前标签页的示例：

HTML:

<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'Tab1')">Tab 1</button>
  <button class="tablinks" onclick="openTab(event, 'Tab2')">Tab 2</button>
  <button class="tablinks" onclick="openTab(event, 'Tab3')">Tab 3</button>
</div>

<div id="Tab1" class="tabcontent">
  <h3>Tab 1</h3>
  <p>Content for tab 1 goes here.</p>
</div>

<div id="Tab2" class="tabcontent">
  <h3>Tab 2</h3>
  <p>Content for tab 2 goes here.</p>
</div>

<div id="Tab3" class="tabcontent">
  <h3>Tab 3</h3>
  <p>Content for tab 3 goes here.</p>
</div>

JavaScript:

function openTab(event, tabName) {
  // 获取所有标签按钮
  var tablinks = document.getElementsByClassName("tablinks");

  // 隐藏内容区域中所有标签页
  var tabcontent = document.getElementsByClassName("tabcontent");
  for (var i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // 将所有标签按钮的类名更改为 tablinks，将当前标签按钮的类名更改为 tablinks active
  for (var i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  event.currentTarget.className += " active";

  // 显示当前标签页的内容
  document.getElementById(tabName).style.display = "block";
}

在此示例中，当用户单击标签按钮时，将调用 openTab() 函数。此函数接受两个参数：单击事件的事件对象和要显示的标签页的ID。

在函数内部，首先获取所有标签按钮和内容区域中所有的标签页。然后，它隐藏所有标签页内容，并将所有标签按钮的类名更改为“tablinks”，将当前标签按钮的类名更改为“tablinks active”。

最后，它显示当前标签页的内容，通过使用 document.getElementById() 方法查找具有给定ID的HTML元素并更改其样式来实现。