时间戳

首页 > 解决方案 > 如何使用 Javascript 一次只有一个 aria-selected="true" 而其余的为 "false"？

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

问题描述

我正在使用 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

解决方案

您是否尝试过event.preventDefault();在回调上使用，捕获event?

推荐阅读