替换a标签href为onclick后样式与鼠标状态异常的修复咨询

你遇到的问题其实很好理解——原来的菜单样式（比如 hover 高亮）和鼠标悬停时的小手指针，要么是浏览器默认给 <a> 标签的特性，要么是你的 CSS 专门绑定在 <a> 元素上的。直接把 <a> 删掉换成给 <li> 加 onclick，等于丢掉了承载这些样式和交互的核心载体，自然就丢失效果了。

最优解决方案：保留 <a> 标签，修改其行为 #

我们不需要移除 <a>，只需要调整它的跳转逻辑，让它触发平滑滚动而不是页面跳转，同时完整保留原有样式和交互：

<li id="menu-item-1542" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1542">
  <a href="#second" onclick="event.preventDefault(); smoothScroll(document.getElementById('second'))">Contact</a>
</li>

为什么这样能解决问题？ #

1. 鼠标指针正常显示：<a> 标签浏览器默认带有 cursor: pointer 样式，悬停时自然会显示小手指针；
2. CSS 样式完全生效：原来针对 .menu-item a 写的所有样式（比如文字颜色、hover 效果）都会正常应用，因为 <a> 标签还在原位置；
3. 语义化更友好：href="#second" 保留了锚点的语义，即使 JavaScript 失效，用户点击也会直接跳转到目标元素（只是没有平滑效果）；
4. 精准控制跳转行为：event.preventDefault() 会阻止浏览器默认的锚点跳转动作，确保只会触发我们自定义的 smoothScroll 函数。

备选简化方案 #

如果不需要考虑语义化降级，也可以直接把 href 设置为 javascript:void(0) 来阻止默认跳转：

<li id="menu-item-1542" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1542">
  <a href="javascript:void(0)" onclick="smoothScroll(document.getElementById('second'))">Contact</a>
</li>

你的 smoothScroll 函数逻辑没有问题，不需要修改，只需要调整菜单的 HTML 结构即可恢复所有预期效果。

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