前端判斷頁簽是否為活躍狀態(tài)的常用方法

更新時間：2025年12月24日 08:44:47 作者：指尖跳動的光

文章介紹了在網(wǎng)頁開發(fā)中判斷頁簽是否為活躍狀態(tài)的幾種方法,包括前端開發(fā)方法（通過CSS類名、事件監(jiān)聽、URLHash或路由）、React和Vue框架中的實現(xiàn)以及瀏覽器頁簽的活躍狀態(tài)判斷（使用PageVisibilityAPI）,需要的朋友可以參考下

1. 前端開發(fā)（HTML/CSS/JavaScript）

方法 1：通過 CSS 類名判斷

原理：給活躍的頁簽添加特定的 CSS 類名（如 active），通過檢查類名是否存在來判斷狀態(tài)。
示例代碼：

<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>

方法 2：通過事件監(jiān)聽

原理：監(jiān)聽頁簽的點擊事件，動態(tài)切換活躍狀態(tài)。
示例代碼：

document.querySelectorAll('.tab').forEach(tab => {
  tab.addEventListener('click', () => {
    // 移除所有頁簽的活躍狀態(tài)
    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
    // 設置當前頁簽為活躍
    tab.classList.add('active');
    console.log('切換到頁簽:', tab.textContent);
  });
});

方法 3：通過 URL Hash 或路由

原理：根據(jù) URL 的 Hash（如 #tab1）或前端路由（如 React Router）判斷當前活躍頁簽。
示例代碼：

// 根據(jù) 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(); // 初始化

2. 框架中的實現(xiàn)（如 React/Vue）

React 示例

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>
  );
}

Vue 示例

<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>

3. 瀏覽器頁簽（Tab）的活躍狀態(tài)

如果是判斷瀏覽器頁簽（整個窗口）是否處于活躍狀態(tài)（例如用戶是否切換到其他標簽頁），可以使用 Page Visibility API：

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    console.log('頁簽處于非活躍狀態(tài)');
  } else {
    console.log('頁簽處于活躍狀態(tài)');
  }
});