tabs实现 js

使用原生JavaScript实现Tabs功能

通过DOM操作和事件监听实现基础的Tabs切换功能。以下是完整实现代码：

document.addEventListener('DOMContentLoaded', function() {
  const tabButtons = document.querySelectorAll('.tab-button');
  const tabContents = document.querySelectorAll('.tab-content');

  tabButtons.forEach(button => {
    button.addEventListener('click', () => {
      const tabId = button.getAttribute('data-tab');

      tabButtons.forEach(btn => btn.classList.remove('active'));
      tabContents.forEach(content => content.classList.remove('active'));

      button.classList.add('active');
      document.getElementById(tabId).classList.add('active');
    });
  });
});

对应HTML结构：

<div class="tabs">
  <div class="tab-buttons">
    <button class="tab-button active" data-tab="tab1">Tab 1</button>
    <button class="tab-button" data-tab="tab2">Tab 2</button>
    <button class="tab-button" data-tab="tab3">Tab 3</button>
  </div>

  <div class="tab-contents">
    <div id="tab1" class="tab-content active">Content 1</div>
    <div id="tab2" class="tab-content">Content 2</div>
    <div id="tab3" class="tab-content">Content 3</div>
  </div>
</div>

基础CSS样式：

.tab-button {
  padding: 10px 20px;
  background: #eee;
  border: none;
  cursor: pointer;
}

.tab-button.active {
  background: #ddd;
  font-weight: bold;
}

.tab-content {
  display: none;
  padding: 20px;
  border: 1px solid #ddd;
}

.tab-content.active {
  display: block;
}

使用jQuery实现Tabs

如果项目中已引入jQuery，可以用更简洁的方式实现：

$(document).ready(function() {
  $('.tab-button').click(function() {
    const tabId = $(this).data('tab');

    $('.tab-button').removeClass('active');
    $('.tab-content').removeClass('active');

    $(this).addClass('active');
    $('#' + tabId).addClass('active');
  });
});

动态加载内容

实现点击Tab时动态加载内容：

document.querySelectorAll('.tab-button').forEach(button => {
  button.addEventListener('click', async () => {
    const tabId = button.dataset.tab;
    const response = await fetch(`/api/content/${tabId}`);
    const content = await response.text();

    document.getElementById(tabId).innerHTML = content;
    // 其余切换逻辑同上
  });
});

可访问性增强

为提升无障碍体验，可添加ARIA属性：

<button role="tab" aria-selected="true" aria-controls="tab1">Tab 1</button>
<div role="tabpanel" id="tab1" aria-labelledby="tab1">...</div>

对应JavaScript更新：

button.setAttribute('aria-selected', 'true');
content.setAttribute('aria-hidden', 'false');

动画效果实现

为Tab切换添加淡入淡出效果：

function switchTab(newTab) {
  const currentTab = document.querySelector('.tab-content.active');

  currentTab.style.opacity = 0;
  setTimeout(() => {
    currentTab.classList.remove('active');
    newTab.classList.add('active');
    newTab.style.opacity = 0;
    setTimeout(() => {
      newTab.style.opacity = 1;
    }, 50);
  }, 300);
}

CSS添加过渡效果：

.tab-content {
  transition: opacity 0.3s ease;
  opacity: 0;
}

.tab-content.active {
  opacity: 1;
}