javascript - 如何使用 Jquery 在 html 中创建带有 input[type="radio"] 的选项卡？

Question

我正在尝试input[type="radio"]使用 Jquery 创建一个选项卡，并且我的选项卡在第一次单击时工作正常，但是当我们单击第二次单击时它将无法工作。我被困在上面，没有找到 Jquery 中缺少的地方。有人能帮我吗？

这是代码链接：点击这里

$('.tablist').on('click', 'input', function(){

  var tabList = $('.tablist-content').attr('id');
  if($(this).attr('type','radio').is(':checked') || $(this).next('label').text() == tabList){
    $(this).parents('.tabWrapper').find("#" + tabList).show();
    console.log(tabList);
  }
  else {
    $(tabList).hide();
  }

});

.tablist-content {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabWrapper">
<ul class="list-unstyled tablist">
  <li>
    <input type="radio" name="tablist" id="tablist1">
    <label for="tablist1">List1</label>
  </li>
  <li>
  <input type="radio" name="tablist" id="tablist2">
  <label for="tablist2">List2</label>
  </li>
</ul>

<div class="col-md-12">
  <div class="tablist-content" id="list1">
    List one content
  </div>
  <div class="tablist-content" id="list2">
    List Two content
  </div>
</div>

</div>

标签： javascripthtmljquerycss

Answer 1

使用数据属性

无需测试是否已检查。

$('.tablist').on('click', 'input', function() {
  $(".tablist-content").hide()
  $("#"+$(this).data("id")).show()
});

.tablist-content {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabWrapper">
<ul class="list-unstyled tablist">
  <li>
    <input type="radio" name="tablist" data-id="list1">
    <label for="tablist1">List1</label>
  </li>
  <li>
  <input type="radio" name="tablist" data-id="list2">
  <label for="tablist2">List2</label>
  </li>
</ul>

<div class="col-md-12">
  <div class="tablist-content" id="list1">
    List one content
  </div>
  <div class="tablist-content" id="list2">
    List Two content
  </div>
</div>

</div>