Javascript 如何使用Jquery在html中使用输入[type="；radio"；]创建选项卡？

我正在尝试使用Jquery创建一个带有

input[type=“radio”]

的选项卡，我的选项卡在第一次单击时工作正常，但在第二次单击时将无法工作。我陷入了困境，无法理解Jquery中缺少的内容。有人能帮我吗

以下是代码链接：

$（'.tablist'）。在（'click'，'input'，function（）上{
var tabList=$（'.tabList content'）.attr（'id'）；
如果（$（this.attr（'type'，'radio'）.is（'：checked'）|$（this.next（'label'））.text（）==tabList）{
$（this）.parents（'.tabWrapper'）.find（“#”+tabList.show（）；
控制台日志（tabList）；
}
否则{
$（tabList.hide（）；
}
});
.tablist内容{
显示：无；
}



清单1


清单2


列出一个内容
列出两个内容
使用数据属性

无需测试是否已检查


$（'.tablist'）。在（'click'，'input'，function（）上{
$（“.tablist content”）.hide（）
$（“#”+$（this.data（“id”）.show（）
});
.tablist内容{
显示：无；
}



清单1


清单2


列出一个内容
列出两个内容
使用数据属性

无需测试是否已检查


$（'.tablist'）。在（'click'，'input'，function（）上{
$（“.tablist content”）.hide（）
$（“#”+$（this.data（“id”）.show（）
});
.tablist内容{
显示：无；
}



清单1


清单2


列出一个内容
列出两个内容
您可以使用
.index（）
方法来确定单击收音机的索引，该索引应该是要显示的选项卡的索引

也考虑使用<代码>更改>代码>事件，该事件仅在从未选中到未更改时触发。相反，
单击
事件会触发之前是否选中了
收音机
，除非这是您的目标


$（'.tablist'）。在（'change'，'input'，function（）上{
var index=$（'input[name=tablist]'）。索引（this）；
$（'.tablist content'）.hide（）.eq（index.show（）；
});
.tablist内容{
显示：无；
}



清单1


清单2


列出一个内容
列出两个内容
您可以使用
.index（）
方法来确定单击收音机的索引，该索引应该是要显示的选项卡的索引

也考虑使用<代码>更改>代码>事件，该事件仅在从未选中到未更改时触发。相反，
单击
事件会触发之前是否选中了
收音机
，除非这是您的目标


$（'.tablist'）。在（'change'，'input'，function（）上{
var index=$（'input[name=tablist]'）。索引（this）；
$（'.tablist content'）.hide（）.eq（index.show（）；
});
.tablist内容{
显示：无；
}



清单1


清单2


列出一个内容
列出两个内容
$（'.tablist content'）.attr（'id'）获取在整个文档中找到的具有该类名的第一个元素的ID。您无法连接到您在此处操作的实际单选按钮。而
$（this）.attr（'type'，'radio'）.is（'：checked'）
也没有什么意义。
$（'tablist content'）.attr（'id'）获取在整个文档中找到的具有该类名的第一个元素的ID。您无法连接到您在此处操作的实际单选按钮。而
$（this）.attr（'type'，'radio'）.is（'：checked'）
也没有什么意义。谢谢您！到目前为止，这是一个单一的解决方案。谢谢你！到目前为止，这是一个单一的解决方案。