我正在建立一个网站，以前使用按钮和锚建立导航。我不知道该用哪个选项卡导航。
我看了这个问题/答案，基本上可以归结为:
在重定向到另一个页面时使用<a>，因为这是超链接的预期用途。
使用<button>来执行一个动作，如表单提交，或执行一个函数。
这对我来说很有意义，但我的特定网站是一个带有标签导航的应用程序。我有几个页面是通过操纵DOM构建的，但站点链接保持不变，导航实际上只是用新元素替换现有的DOM元素。
在这种情况下，是使用按钮来导航更好呢，还是我应该一直坚持使用锚，即使它们没有"重定向"?传统的页面?我知道有些差异只是主观的，比如开箱即用的样式差异，但是在选项卡导航中使用一个而不是另一个会有相当大的缺点吗?
从语义上讲，这听起来像是同页导航。根据标准，为此使用<a>元素。然后为JavaScript副作用添加一个事件监听器。
W3C使用按钮:
我也是MDN的超级粉丝，但是，<button>在如何创建选项卡示例中使用。
我个人的理解
感觉有一些合法的选择来实现它，我个人看tab，看到<nav>和<section>元素组装。由于我的UI框架有我使用的这两种成分，导航有一个<a>里面(不是多层次的，不需要<ul><li>里面…
给制表符创建者的附加建议
但是不要忘记添加role和aria-*标签，这样至少可以明确所选元素的预期功能是什么，包括可访问性支持(例如屏幕阅读器):
. .这次让我们使用一个MDN引用(但这里的代码是为了不过度使用'div'，我喜欢语义:
<section>
<nav role="tablist">
<a
href='#'
role="tab"
aria-controls="panel-1"
aria-selected="true"
tabindex="0"
aria-label="Tab 1"
aria-controls="panel-1"
>Tab 2</a>
<a
href='#'
role="tab"
aria-controls="panel-2"
aria-selected="true"
tabindex="1"
aria-label="Tab 2"
>Tab 1</a>
</nav>
<section
id="panel-1"
role="tabpanel"
aria-labelledby="tab-1"
tabindex="0">Panel 1</section>
<section
id="panel-2"
role="tabpanel"
aria-labelledby="tab-2"
tabindex="0">Panel 2</section>
</section>
值得一提的:
display: none避免加载非活动内容(React.js)tabindex允许用键盘控制制表符href可以通过直接链接到选项卡来保持状态，但需要使用e.preventDefault()的onClick事件处理程序来避免页面重新加载。<section>可以被视为整体，而不是作为内容部分，可能取决于你在面板内显示的内容。
我将坚持我的方式，但我会做一些更多的调查关于这个时间，因为W3C似乎更喜欢<button>。
问问自己:
- 每个人都能按预期使用吗?
- 你们是否为智障/残障人士提供无障碍支持?