JS 检查选项卡是否切换 - Javascript

在一个网站的选项卡切换时，有时需要在切换到另一个选项卡时执行一些操作（比如向后台发送请求、更新页面内容等）。为了实现这一目的，需要检查选项卡是否切换。

检查选项卡是否切换的方法

一般来说，检查选项卡是否切换有两种方法：

1. 利用事件监听器

选项卡的切换一般是通过click事件触发的，所以可以给选项卡的切换按钮添加click事件监听器，在触发事件时检查选项卡是否切换。代码如下：

var activeTabIndex = 0; // 记录当前选中的选项卡索引

// 给选项卡切换按钮添加 click 事件监听器
document.querySelectorAll('.tab-button').forEach(function(button, index) {
  button.addEventListener('click', function() {
    // 判断选项卡是否切换
    if (activeTabIndex !== index) {
      // 选项卡切换了，执行你想要的操作
      // ...
      // 更新 activeTabIndex
      activeTabIndex = index;
    }
  });
});

2. 利用定时器

选项卡的切换有一个特点：当切换到一个选项卡时，前一个选项卡的内容会立即隐藏，而显示当前选项卡的内容。因此，可以利用定时器检查当前选项卡的内容是否可见，如果不可见，则说明选项卡已经切换了。代码如下：

var activeTabIndex = 0; // 记录当前选中的选项卡索引

// 开始定时器
var intervalId = setInterval(function() {
  // 判断当前选项卡的内容是否可见
  var tabContent = document.querySelector('.tab-content[data-index="' + activeTabIndex + '"]');
  if (tabContent.style.display === 'none') {
    // 选项卡切换了，执行你想要的操作
    // ...
    // 更新 activeTabIndex
    activeTabIndex = [...document.querySelectorAll('.tab-button')].findIndex(function(button) {
      return button.classList.contains('active');
    });
  }
}, 100);

总结

以上两种方法都可以检查选项卡是否切换，具体使用哪种方法可以根据实际需要选择。需要注意的是，方法一比较简洁明了，但当选项卡切换过于频繁时，可能会出现事件覆盖等问题；方法二则需要使用定时器，如果定时间隔设置过短，可能会影响性能。