如何使用jQuery隐藏/显示选项卡 [英] How to hide/show tabs using jquery
本文介绍了如何使用jQuery隐藏/显示选项卡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有四个选项卡，在加载时仅打开第一个选项卡，当我们单击复选框时会生成相应的选项卡，而当我们取消选中时，该选项卡将被删除，我该怎么做? 我的代码是
I have four tabs.On loading only the first tab is opened and when we click on the checkboxes corresponding tab is generated and when we unchecked, the tab will be deleted.How can I do this? My code is
<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/中查看我的代码
You can check my code from http://jsfiddle.net/2aQ2g/5/
推荐答案
与其删除选项卡，不如考虑将其隐藏.
Instead of deleting the tab, consider hiding it.
您可以添加以下CSS使其起作用.
You can add the following CSS to make it work.
.ui-state-disabled {
display: none;
}
检查此小提琴: http://jsfiddle.net/2aQ2g/12/
当然，还需要处理相应选项卡内容的隐藏.
Of course would also need to handle the hiding of corresponding tab content as well.
这篇关于如何使用jQuery隐藏/显示选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
