关于Foundation选项卡，我在使用tabindex时遇到了一些麻烦，并且在使用键盘导航页面时无法专注于选项卡。我使用的CMS不允许我在第一个选项卡上使用is-active类。因此，我正在使用JavaScript动态地应用is-active类。但是，这样做时，第一个标签锚上的tabindex仍设置为tabindex="-1"，因此无法使用键盘导航到这些标签。
在默认情况下应用is-active类时（在演示示例中），Foundation负责设置tabindex="0"使其可通过键盘访问。我已经建立了一个演示：
<ul class="tabs" data-tabs="0btzm1-tabs" id="example-tabs" role="tablist">
<li class="tabs-title is-active" role="presentation"><a href="#panel1" aria-selected="false" role="tab" aria-controls="panel1" id="panel1-label" tabindex="-1">Tab 1</a></li>
<li class="tabs-title" role="presentation"><a href="#panel2" role="tab" aria-controls="panel2" aria-selected="false" id="panel2-label" tabindex="-1">Tab 2</a></li>
<li class="tabs-title" role="presentation"><a href="#panel3" role="tab" aria-controls="panel3" aria-selected="false" id="panel3-label" tabindex="-1">Tab 3</a></li>
<li class="tabs-title" role="presentation"><a href="#panel4" role="tab" aria-controls="panel4" aria-selected="true" id="panel4-label" tabindex="-1">Tab 4</a></li>
<li class="tabs-title" role="presentation"><a href="#panel5" role="tab" aria-controls="panel5" aria-selected="false" id="panel5-label" tabindex="-1">Tab 5</a></li>
<li class="tabs-title" role="presentation"><a href="#panel6" role="tab" aria-controls="panel6" aria-selected="false" id="panel6-label" tabindex="-1">Tab 6</a></li>
</ul>
https://codepen.io/benvivo/pen/rQQVmZ
在此先感谢您的帮助。