Web应用动态交互场景：锚点(anchor)与按钮(button)语义选择咨询

先把核心的语义规则说清楚，这是判断的基础：

• <a>（锚点）天生是用来导航到某个资源的——不管是跳转到页面内的锚点、另一个网页，还是打开外部链接，它的本质是“带你去某个地方”。
• <button>则是用来触发一个动作的——比如提交表单、发起API请求、更新页面内容，它的核心是“让某个事情发生”。

你的场景绝对更适合用<button> #

咱们对应你的情况拆解来看：

• 语义完全匹配：你点击这些元素是为了触发后端查询，然后更新前端的状态展示，整个过程没有页面跳转，也没有导航到任何资源，纯纯是一个“动作触发”行为，这刚好是<button>的本职工作。
• 摆脱尴尬的hack写法：你现在用的href="javascript:void(0);"其实是为了阻止锚点默认的跳转行为，这种写法本身就违背了锚点的语义，而且对屏幕阅读器用户不友好——阅读器会把它识别成可导航的链接，但点了之后啥也没跳，这会造成困惑。
• 可访问性拉满：<button>默认就支持键盘交互，用户按Enter或者Space键就能触发，不需要额外写代码；但如果你用锚点加javascript:void(0)，就得手动处理键盘事件，不然键盘用户根本用不了这个功能。
• 样式完全可控：怕按钮默认样式丑？完全可以用CSS把它改成和锚点一模一样的样子，比如去掉边框、背景，加上下划线，视觉上和原来的锚点没区别，但语义却正确了。

有没有理由继续用锚点？ #

说实话，没有符合规范的理由。如果之前用锚点是因为习惯了，或者觉得改样式麻烦，这些都不是合理的借口——毕竟语义化和可访问性是现代Web开发的基本要求。唯一可能的极端情况是兼容非常老旧的浏览器，但现在主流浏览器对<button>的支持已经非常完善，这个理由站不住脚。

给你改个示例代码参考 #

把原来的<a>换成<button>就行，比如：

<li value="OPTION1" class="">
  <button class="no-style-button" onClick={yourQueryHandler}>OPTION1</button>
</li>

然后给按钮加个样式重置，让它看起来和锚点一致：

.no-style-button {
  background: transparent;
  border: none;
  padding: 0;
  color: #0066cc; /* 替换成你原来锚点的文字颜色 */
  cursor: pointer;
  text-decoration: underline;
}
.no-style-button:hover {
  text-decoration: none; /* 可匹配原来锚点的hover效果 */
}

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