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

Question

我正在尝试使用 Jquery 创建一个带有input[type="radio"]的选项卡，并且我的选项卡在第一次单击时工作正常，但是当我们单击第二次单击时它将无法工作。 我被困住了，没有找到 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>

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>

Answer 2

您可以使用.index()方法来确定单击单选的索引，该索引应该是要显示的选项卡的索引。

还可以考虑使用仅在从未选中更改为选中时触发的change事件。 相反， click事件会触发之前是否检查过radio ，除非这是您的目标。

 $('.tablist').on('change', 'input', function() { var index = $('input[name=tablist]').index(this); $('.tablist-content').hide().eq(index).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" 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>