如何使用 Javascript 一次只有一个 aria-selected="true" 而其余的为 "false"？答案

【问题标题】：How to use Javascript to have only one aria-selected="true" and the rest "false" at a time?如何使用 Javascript 一次只有一个 aria-selected="true" 而其余的为 "false"？
【发布时间】：2021-05-26 07:21:31
【问题描述】：

我正在使用来自 shopify 的应用程序，但开发人员不支持自定义，因此我正在尝试进行一些调整。我有一个选项卡，其中有两个选项，即按钮，当两者都被来回单击时，它们保持 aria-selected="true"。当只点击一个时，我希望只有一个为真，而另一个为假。如何？以下是我拥有的，但它不起作用。

  <div role="tablist" data-value-id="option_188647_7a6a36de-cae4-426e-848e-9770e831ab53" class="button-value-div">

     <button role="tab" type="button" data-value-id="value_188647_7a6a36de-cae4-426e-848e-9770e831ab53_9

3ffc302-3c0a-4c2b-885f-8e893241802c" id="black" class="beside-image test-sin" data-default="1">

        </button>
           
       <button aria-selected="false" role="tab" type="button" data-value-id="value_188647_7a6a36de-cae4-426e-848e-9770e831ab53_3fa2c66a-22ce-42df-b978-61eaba10131c" id="white" class="beside-image test-sin">

       </button>

   </div>

  <script>
$(document).ready(function($){
  $("button").attr("data-selected","false");
  $("button").addClass("test");

  $('.test').click(function() {
    if ($(this).attr('data-selected') == "false") {  // Change is here.
      $(this).attr("data-selected","false");
    } 
    else {
      $(this).attr("data-selected", "false");
    }
  });
});
</script>

【问题讨论】：

标签： javascript

【解决方案1】：

您是否尝试在回调中使用event.preventDefault();，捕获event？

【讨论】：