JS自定义选项卡函数及用法实例分析

以下是关于 JS 自定义选项卡函数及用法实例分析的详细攻略。

什么是选项卡

选项卡是网页常见的交互控件之一，可以让用户在不离开当前页面的情况下切换内容。

自定义选项卡函数

在 HTML 中，选项卡可以使用 <ul> 和 <li> 标签加 CSS 样式来实现。但如果需要动态添加选项卡、改变选项卡样式或者添加一些交互效果，我们可以使用 JavaScript 来自定义选项卡函数。

例如，下面是一个简单的自定义选项卡函数：

function toggleTabs(index) {
  const tabContent = document.querySelectorAll('.tab-content');
  const tabLinks = document.querySelectorAll('.tab-link');

  // 隐藏所有选项卡内容
  tabContent.forEach(content => content.style.display = 'none');

  // 移除所有选项卡链接的 active 样式
  tabLinks.forEach(link => link.classList.remove('active'));

  // 显示当前选项卡内容
  tabContent[index].style.display = 'block';

  // 添加当前选项卡链接的 active 样式
  tabLinks[index].classList.add('active');
}

以上代码中，函数 toggleTabs 接受一个索引值作为参数，用来指定当前要显示的选项卡。第一步是获取所有选项卡内容和选项卡链接，第二步是隐藏所有选项卡内容和移除所有选项卡链接的 active 样式，第三步是显示当前选项卡内容和添加当前选项卡链接的 active 样式。

选项卡用法实例分析

实例 1

下面是一个简单的自定义选项卡用法示例：

<ul class="tabs">
  <li class="tab-link active" onclick="toggleTabs(0)">选项卡 1</li>
  <li class="tab-link" onclick="toggleTabs(1)">选项卡 2</li>
  <li class="tab-link" onclick="toggleTabs(2)">选项卡 3</li>
</ul>
<div class="tab-content active">选项卡 1 内容</div>
<div class="tab-content">选项卡 2 内容</div>
<div class="tab-content">选项卡 3 内容</div>

这个示例中，我们先定义了一个 <ul> 标签用来显示选项卡链接，然后定义了三个 <li> 标签作为选项卡链接，同时给其中一个选项卡链接添加 active 样式，以便默认显示第一个选项卡。接着，我们定义了三个 <div> 标签用来显示选项卡内容，其中第一个 <div> 标签默认显示。最后，我们为每个选项卡链接绑定了一个 onclick 事件，调用自定义选项卡函数 toggleTabs。

实例 2

下面是一个自定义选项卡用法示例，其中选项卡内容使用 AJAX 动态加载：

<ul class="tabs">
  <li class="tab-link active" onclick="toggleTabs(0)">选项卡 1</li>
  <li class="tab-link" onclick="toggleTabs(1)">选项卡 2</li>
  <li class="tab-link" onclick="toggleTabs(2)">选项卡 3</li>
</ul>
<div class="tab-content active">选项卡 1 内容</div>
<div class="tab-content"></div>
<div class="tab-content"></div>

这个示例中，选项卡内容部分没有预设内容，而是使用空的 <div> 标签占位。接着，在 JavaScript 中，我们可以使用 AJAX 技术动态加载选项卡内容：

function toggleTabs(index) {
  const tabContent = document.querySelectorAll('.tab-content');
  const tabLinks = document.querySelectorAll('.tab-link');

  // 隐藏所有选项卡内容
  tabContent.forEach(content => content.style.display = 'none');

  // 移除所有选项卡链接的 active 样式
  tabLinks.forEach(link => link.classList.remove('active'));

  // 如果当前选项卡未加载内容，则使用 AJAX 加载内容并显示
  const currentTabContent = tabContent[index];
  if (!currentTabContent.innerHTML && currentTabContent.getAttribute('data-src')) {
    fetch(currentTabContent.getAttribute('data-src'))
      .then(response => response.text())
      .then(html => {
        currentTabContent.innerHTML = html;
        currentTabContent.style.display = 'block';
        tabLinks[index].classList.add('active');
      });
  } else {
    // 显示当前选项卡内容并添加 active 样式
    currentTabContent.style.display = 'block';
    tabLinks[index].classList.add('active');
  }
}

以上代码中，我们在自定义选项卡函数中添加了一些判断逻辑，如果当前选项卡内容为空并且存在 data-src 属性，就使用 AJAX 加载对应的 HTML 内容。

例如，可以使用下面的代码片段来演示 AJAX 加载选项卡内容的功能：

<ul class="tabs">
  <li class="tab-link active" onclick="toggleTabs(0)">选项卡 1</li>
  <li class="tab-link" onclick="toggleTabs(1)">选项卡 2</li>
</ul>
<div class="tab-content active">选项卡 1 内容</div>
<div class="tab-content" data-src="./ajax-content.html"></div>

其中，第二个选项卡的 data-src 属性指向一个本地的 HTML 文件 ajax-content.html，用于演示 AJAX 动态加载内容的效果。