WordPress Elementor：如何让按钮匹配当前URL时保持悬停效果

核心思路 #

给匹配当前URL的按钮添加一个和悬停样式完全一致的active类，通过JavaScript在页面加载时自动判断并添加该类。

步骤实现 #

1. HTML结构

给每个导航按钮统一添加类名（比如nav-btn），并设置对应的跳转路径：

<nav class="header-nav">
  <a href="/1" class="nav-btn">按钮1</a>
  <a href="/2" class="nav-btn">按钮2</a>
  <a href="/3" class="nav-btn">按钮3</a>
</nav>

2. CSS样式

定义按钮的基础样式，同时让hover状态和active状态共享一套样式：

.nav-btn {
  padding: 10px 18px;
  color: #2d2d2d;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

/* 悬停与激活状态共用样式 */
.nav-btn:hover,
.nav-btn.active {
  background-color: #f0f0f0;
  color: #0066cc;
}

3. JavaScript逻辑

页面加载时，获取当前地址栏路径，遍历所有导航按钮，匹配路径的按钮添加active类：

// 获取当前页面路径
const currentPath = window.location.pathname;
// 获取所有导航按钮
const navBtns = document.querySelectorAll('.nav-btn');

navBtns.forEach(btn => {
  // 对比按钮路径与当前页面路径
  if (btn.getAttribute('href') === currentPath) {
    btn.classList.add('active');
  }
});

补充说明 #

• 如果你的按钮使用的是完整URL（比如https://weburl/2），可以把对比逻辑改成btn.href === window.location.href
• 若存在路由参数（比如/2?id=1），可以通过currentPath.split('?')[0]来忽略参数部分进行匹配

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