如何在 PHP 中创建选项卡 - Javascript

在PHP中，我们可以使用Javascript来创建选项卡，这是因为Javascript是客户端脚本，可以在浏览器执行。在这个教程中，我们将学习如何使用Javascript来创建选项卡。

基本方法

基本的选项卡可以通过创建一个具有不同样式的HTML列表来实现。

<ul>
  <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</div>
<div id="tab2">Content for tab 2</div>
<div id="tab3">Content for tab 3</div>

使用CSS样式指定选项卡列表和内容的外观。然后，通过Javascript添加一个点击事件监听器，以便在单击选项卡时切换显示内容。

const tabs = document.querySelectorAll('ul li a');
tabs.forEach(tab => {
  tab.addEventListener('click', e => {
    e.preventDefault();
    const id = e.target.getAttribute('href');
    document.querySelectorAll('.active').forEach(activeTab => {
      activeTab.classList.remove('active');
    });
    document.querySelector(id).classList.add('active');
  });
});

使用jQuery

使用jQuery，您可以更轻松地为选项卡创建交互式效果。与原始方法不同的是，您可以通过选择器轻松选择选项卡，从而可以更轻松地控制选项卡的行为。

<ul id="myTabs">
  <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</div>
<div id="tab2">Content for tab 2</div>
<div id="tab3">Content for tab 3</div>

$(document).ready(function() {
  $('#myTabs').tabs();
});

这里，我们使用jQuery UI的.tabs()方法将选项卡应用于列表。此方法将为选项卡创建默认样式，并在单击时处理切换逻辑。还可以使用可选参数来更改默认选项卡样式。例如，如下调用将为选项卡列表创建纵向样式。

$(document).ready(function() {
  $('#myTabs').tabs({
    orientation: 'vertical'
  });
});