快捷導(dǎo)航

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

更新時(shí)間：2025年12月24日 08:44:47 作者：指尖跳動(dòng)的光

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

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

方法 1：通過(guò) CSS 類(lèi)名判斷

原理：給活躍的頁(yè)簽添加特定的 CSS 類(lèi)名（如 active），通過(guò)檢查類(lèi)名是否存在來(lái)判斷狀態(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('當(dāng)前活躍的頁(yè)簽:', tab.textContent);
    }
  });
</script>

方法 2：通過(guò)事件監(jiān)聽(tīng)

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

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

方法 3：通過(guò) URL Hash 或路由

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

// 根據(jù) URL Hash 設(shè)置活躍頁(yè)簽
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. 框架中的實(shí)現(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>當(dāng)前活躍頁(yè)簽: {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>當(dāng)前活躍頁(yè)簽: {{ activeTab }}</div>
  </div>
</template>

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

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

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

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