gpt4 book ai didi

javascript - 如何使用 jquery 隐藏/显示选项卡

转载 作者:行者123 更新时间:2023-11-30 18:08:33 26 4
gpt4 key购买 nike

我有四个选项卡。加载时只打开第一个选项卡,当我们单击复选框时会生成相应的选项卡,当我们取消选中时,选项卡将被删除。我该怎么做?我的代码是

    <script>
$(function() {
$("#tabs").tabs();
});
</script>
<style>

</style>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nithin</a> </li>
<li><a href="#tabs-2">Vipin</a></li>
<li><a href="#tabs-3">Sachin</a></li>
<li><a href="#tabs-4">Ganguly</a></li>
</ul>
<div id="tabs-1">
<p>Nithin</p>
</div>
<div id="tabs-2">
<p>Vipin</p>
</div>
<div id="tabs-3">
<p>Sachin</p>
</div>
<div id="tabs-4">
<p>Ganguly</p>
</div>
</div>
<input type="checkbox" name="tabs-1" value="1">tabs-1
<input type="checkbox" name="tabs-2" value="2">tabs-2
<input type="checkbox" name="tabs-3" value="3">tabs-3
<input type="checkbox" name="tabs-4" value="4">tabs-4
<br>
</body>
</html>

您可以从http://jsfiddle.net/2aQ2g/5/ 查看我的代码

最佳答案

与其删除选项卡,不如考虑隐藏它。

您可以添加以下 CSS 使其工作。

.ui-state-disabled {
display: none;
}

检查这个 fiddle :http://jsfiddle.net/2aQ2g/12/

当然还需要处理相应标签内容的隐藏。

关于javascript - 如何使用 jquery 隐藏/显示选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15199468/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com