前端判断页签是否为活跃状态的常用方法

<div class="tab active">Tab 1</div>
<div class="tab">Tab 2</div>

<script>
  const tabs = document.querySelectorAll('.tab');
  tabs.forEach(tab => {
    if (tab.classList.contains('active')) {
      console.log('当前活跃的页签:', tab.textContent);
    }
  });
</script>

document.querySelectorAll('.tab').forEach(tab => {
  tab.addEventListener('click', () => {
    // 移除所有页签的活跃状态
    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
    // 设置当前页签为活跃
    tab.classList.add('active');
    console.log('切换到页签:', tab.textContent);
  });
});

// 根据 URL Hash 设置活跃页签
function setActiveTab() {
  const hash = window.location.hash.substring(1); // 去掉 #
  document.querySelectorAll('.tab').forEach(tab => {
    tab.classList.toggle('active', tab.id === hash);
  });
}
window.addEventListener('hashchange', setActiveTab);
setActiveTab(); // 初始化

import { useState } from 'react';

function Tabs() {
  const [activeTab, setActiveTab] = useState('tab1');

  return (
    <div>
      <button 
        className={activeTab === 'tab1' ? 'active' : ''}
        onClick={() => setActiveTab('tab1')}
      >
        Tab 1
      </button>
      <button 
        className={activeTab === 'tab2' ? 'active' : ''}
        onClick={() => setActiveTab('tab2')}
      >
        Tab 2
      </button>
      <div>当前活跃页签: {activeTab}</div>
    </div>
  );
}

<template>
  <div>
    <button 
      :class="{ active: activeTab === 'tab1' }"
      @click="activeTab = 'tab1'"
    >
      Tab 1
    </button>
    <button 
      :class="{ active: activeTab === 'tab2' }"
      @click="activeTab = 'tab2'"
    >
      Tab 2
    </button>
    <div>当前活跃页签: {{ activeTab }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'tab1'
    };
  }
};
</script>

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    console.log('页签处于非活跃状态');
  } else {
    console.log('页签处于活跃状态');
  }
});