咨询：如何基于URL中的#锚点激活列表组对应标签页

Hey there! Let's get that vertical tab component auto-activating based on URL anchors sorted out—here's a practical approach that aligns with the simple vertical tab structure you're working with:

First, make sure your tab links and content panels are set up to map cleanly to URL anchors. Each tab's href should match the id of its corresponding content pane. Here's a sample structure:

<div class="vertical-tab-container">
  <!-- Tab Navigation -->
  <ul class="nav-list">
    <li>
      <a class="nav-item" href="#active-tab">Active Tab</a>
    </li>
    <li>
      <a class="nav-item" href="#second-tab">Second Tab</a>
    </li>
    <li>
      <a class="nav-item" href="#third-tab">Third Tab</a>
    </li>
  </ul>

  <!-- Tab Content Panels -->
  <div class="tab-content">
    <div class="tab-pane" id="active-tab">Content for the active tab</div>
    <div class="tab-pane" id="second-tab">Content for the second tab</div>
    <div class="tab-pane" id="third-tab">Content for the third tab</div>
  </div>
</div>

Key note: The href value on each tab link must exactly match the id of its target content pane—this is how the URL anchor will link to the right tab.

We'll create a reusable function to activate tabs, then hook it into page load and URL hash changes (for when users navigate with browser back/forward buttons):

// Reusable function to activate a tab by anchor ID
function activateTab(anchorId) {
  // Remove active state from all tabs and panes first
  document.querySelectorAll('.nav-item.active').forEach(link => link.classList.remove('active'));
  document.querySelectorAll('.tab-pane.active').forEach(pane => pane.classList.remove('active'));

  // If a valid anchor exists, activate the matching tab and pane
  if (anchorId) {
    const targetTab = document.querySelector(`.nav-item[href="${anchorId}"]`);
    const targetPane = document.querySelector(anchorId);

    if (targetTab && targetPane) {
      targetTab.classList.add('active');
      targetPane.classList.add('active');
      // Optional: Smooth scroll to the active pane for longer pages
      targetPane.scrollIntoView({ behavior: 'smooth', block: 'start' });
    } else {
      // Fallback: Activate first tab if anchor is invalid
      activateFirstTab();
    }
  } else {
    // Fallback: Activate first tab if no anchor is present
    activateFirstTab();
  }
}

// Helper function to activate the first tab
function activateFirstTab() {
  const firstTab = document.querySelector('.nav-item');
  const firstPane = document.querySelector('.tab-pane');
  if (firstTab && firstPane) {
    firstTab.classList.add('active');
    firstPane.classList.add('active');
  }
}

// Trigger on page load
window.addEventListener('load', () => {
  activateTab(window.location.hash);
});

// Trigger when URL hash changes (browser back/forward)
window.addEventListener('hashchange', () => {
  activateTab(window.location.hash);
});

Make sure your CSS clearly indicates which tab is active. Here's a basic example you can tweak to match your design:

/* Hide inactive tab panes */
.tab-pane {
  display: none;
}

/* Show active tab pane */
.tab-pane.active {
  display: block;
}

/* Style for active tab link */
.nav-item.active {
  background-color: #007bff;
  color: white;
  border-radius: 4px;
}

/* Optional: Base styles for vertical tabs */
.nav-list {
  list-style: none;
  padding: 0;
  width: 200px;
}

.nav-item {
  display: block;
  padding: 10px 15px;
  margin-bottom: 8px;
  text-decoration: none;
  color: #333;
}

.vertical-tab-container {
  display: flex;
  gap: 20px;
}

• If the URL contains an invalid anchor (like #non-existent-tab), the script will fall back to activating the first tab.
• If no anchor is present in the URL, the first tab will activate by default, ensuring a consistent initial state for users.

内容的提问来源于stack exchange，提问作者SRouse