如何隐藏选项卡的内容
如何隐藏选项卡的内容
提问于 2013-03-05 13:38:03
我有4个标签，每个标签包含不同的数据。当我点击复选框时，相应的选项卡是shown.But当我取消选中时，选项卡是不可见的，但内容并不是不可见的。如何解决这个问题？我的页面是
<style>
.ui-state-disabled {
display: none;
}
</style>
<script>
$(function() {
$("#tabs").tabs();
$("#tabs").tabs("option", {
"selected": 2,
"disabled": [1,2,3]
});
$( "input[type=checkbox]" ).click(function(){
if ($(this).is(':checked')) {
$('#tabs').tabs("enable", $(this).val());
$('#tabs').tabs("select", $(this).val() );
}
else{
$('#tabs').tabs("disable", $(this).val());
}
});
});
</script>。
<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/12/上查看工作代码
回答 7
Stack Overflow用户
回答已采纳
发布于 2013-03-05 13:54:14
你可以在JSFiddle上查看
$(function() {
$("#tabs").tabs();
$("#tabs").tabs("option", {
"selected": 0,
"disabled": [1,2,3]
});
$( "input[type=checkbox]" ).click(function(){
if ($(this).is(':checked')) {
$('#tabs').tabs("enable", $(this).val());
$('#tabs').tabs("select", $(this).val() );
}
else{
$('#tabs').tabs("disable", $(this).val());
var tab = $(this);
$('#tabs').tabs("select", $(":checked").first().val());
//$('#tabs').tabs("select", $(":checked").last().val());
//It is based on you what to use. (first or last selected value)
}
});
});我希望这能帮到你。问候
Stack Overflow用户
发布于 2013-03-05 14:08:25
只需检查else部分...
$(function() {
$("#tabs").tabs();
$("#tabs").tabs("option", {
"selected": 2,
"disabled": [1,2,3]
});
$( "input[type=checkbox]" ).click(function(){
if ($(this).is(':checked')) {
$('#tabs').tabs("enable", $(this).val());
$('#tabs').tabs("select", $(this).val() );
}
else{
// $('#tabs').tabs("disable", $(this).val());
$('#tabs').tabs("disable", $(this).val());
$('#tabs').tabs("select", $(this).prev().val());
$('#tabs').tabs("enable", $(this).prev().val());
}
});
});Stack Overflow用户
发布于 2013-03-05 13:44:22
尝尝这个
$( "input[type=checkbox]" ).click(function(){
if ($(this).is(':checked')) {
$('#tabs').tabs("enable", $(this).val());
$('#tabs').tabs("select", $(this).val() );
}
else{
$('#tabs').tabs("disable", $(this).val());
$("#tabs-"+$(this).val()).children().hide());
}
});您只需禁用tab.Hide contant即可
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15216595
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号