WordPress网站首页同时存在两个激活状态菜单链接的问题咨询

Got it, let's tackle this issue where your anchor-based menu link stays active on the homepage. The root cause is that most menu active state logic matches the base URL (your homepage) even when the link includes an anchor, so it thinks you're on that "page" permanently. Here are a few tailored fixes:

1. Custom JavaScript to Manual Control Active State #

This works for static sites or any setup where you can add custom JS. The idea is to take full control of when the active class is added/removed:

• First, add a unique class to your target menu link (e.g., anchor-menu-link) so you can target it easily.
• Use this code snippet to handle the state:

// Target your specific menu link and all menu items
const anchorLink = document.querySelector('.anchor-menu-link');
const allMenuLinks = document.querySelectorAll('.nav-link');

// On page load, make sure the link isn't active
window.addEventListener('load', () => {
  anchorLink.classList.remove('active');
});

// When the link is clicked, set it as active and deactivate others
anchorLink.addEventListener('click', (e) => {
  allMenuLinks.forEach(link => link.classList.remove('active'));
  anchorLink.classList.add('active');
});

// Optional: Remove active state when scrolling away from the anchor section
window.addEventListener('scroll', () => {
  const targetSection = document.querySelector('#notre-histoire'); // Match your anchor ID
  const sectionRect = targetSection.getBoundingClientRect();
  
  // Check if the section is outside the viewport
  if (sectionRect.bottom < 0 || sectionRect.top > window.innerHeight) {
    anchorLink.classList.remove('active');
  }
});

2. Adjust URL Matching Logic (For CMS/Frameworks) #

If you're using a CMS like WordPress or a frontend framework, you can modify how the active class is determined:

Example for WordPress: #

Use the nav_menu_css_class filter to only mark the link as active if the URL includes the full anchor:

add_filter('nav_menu_css_class', 'custom_anchor_active_class', 10, 4);
function custom_anchor_active_class($classes, $item, $args, $depth) {
  // Replace with your exact menu link URL
  if ($item->url === 'https://dama.ci/notre-histoire') {
    // Only add active if the current URL has the anchor
    if (strpos($_SERVER['REQUEST_URI'], '#notre-histoire') !== false) {
      $classes[] = 'active';
    } else {
      // Remove any auto-added active class
      $classes = array_diff($classes, ['active']);
    }
  }
  return $classes;
}

Example for Frontend Frameworks (React/Vue): #

Update the active state condition to check for the full URL including the anchor. For React with React Router, you could do something like:

// In your menu component
const isAnchorActive = window.location.hash === '#notre-histoire';

// Then apply the active class only if isAnchorActive is true
<a 
  href="/#notre-histoire" 
  className={`nav-link ${isAnchorActive ? 'active' : ''}`}
>
  Notre Histoire
</a>

3. Use JS for Anchor Navigation (Avoid URL Matching Issues) #

Instead of linking directly to the anchor URL, set the link's href to your homepage, then use JS to handle the scroll and active state. This avoids the URL matching problem entirely:

• Update your menu link HTML:

<a href="/" class="nav-link anchor-menu-link">Notre Histoire</a>

• Add this JS to handle the click:

const anchorLink = document.querySelector('.anchor-menu-link');
const allMenuLinks = document.querySelectorAll('.nav-link');

anchorLink.addEventListener('click', (e) => {
  e.preventDefault(); // Stop default homepage redirect
  
  // Update active states
  allMenuLinks.forEach(link => link.classList.remove('active'));
  anchorLink.classList.add('active');
  
  // Smooth scroll to the anchor section
  document.querySelector('#notre-histoire').scrollIntoView({ behavior: 'smooth' });
  
  // Update the browser URL to include the anchor (optional, for history)
  window.history.pushState({}, '', '#notre-histoire');
});

// Ensure the link isn't active on page load
window.addEventListener('load', () => {
  anchorLink.classList.remove('active');
});

Pick the solution that fits your tech stack best—for static sites, options 1 or 3 are straightforward, while CMS/framework users will benefit from adjusting the built-in matching logic.

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