我可以用一个来模拟多个选项卡吗？

编程问答 2022-08-12

问题描述

我想让用户能够更改许多不同项目的相同设置。我选择要做到这一点的方法是通过给用户的选项列表挑选，并且当选择一个，我显示设置面板与它相对应。

我真的更愿意只使用一个设置面板来更改选择新项目时的值，因为它可以缩小页面的尺寸，并且似乎更易于管理。

标签列表似乎是使该系统更易于访问的正确选择。例如，我想避免这种情况：

<div role='tablist'>
  <button role='tab' id='item1' aria-controls='tabpanel1'>Item 1 <!-- Reveals Tabpanel 1 --></button>
  <button role='tab' id='item2' aria-controls='tabpanel2'>Item 2 <!-- Reveals Tabpanel 2 --></button>
  ...
  ...
</div>

<div role='tabpanel' id='tabpanel1' aria-labelledby='item1'>
  <!-- Settings for Item 1 -->
</div>
<div role='tabpanel' id='tabpanel2' aria-labelledby='item2'>
  <!-- Identical settings for Item 2,just with different values -->
</div>
...
...

而是执行以下操作：

<div role='tablist'>
  <button role='tab' id='item1' aria-controls='tabpanel'>Item 1 <!-- Changes the values in the tabpanel --></button>
  <button role='tab' id='item2' aria-controls='tabpanel'>Item 2 <!-- Changes the values in the tabpanel --></button>
  ...
  ...
</div>

<div role='tabpanel' id='tabpanel' aria-labelledby='«updated via JS»'>
  <!-- Settings for whichever tab is currently selected -->
</div>

如您所见，这意味着每个选项卡都指向相同的选项卡面板。是否有任何理由会对页面的可访问性产生负面影响？还是在选择其他选项卡后确保更新选项卡面板的内容就可以了吗？还是如果使用此方法，我还应该注意其他陷阱吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

accessibilityaccessibilityhtmlwai-aria