我们在页面的中心栏中使用五个选项卡,用于显示/隐藏内容。
在我们的右侧栏中,只有在选择选项卡一时才会显示内容(这是页面加载时的默认值,名为“#overview”)。
如何确保当选择选项卡 2、3、4 或 5 时,该右侧 div 设置为 display:none?不幸的是,我无法将其包含在选项卡 1 的内容中,这将是一个简单的解决方案 - 它必须显示在右列中。
我想要隐藏的类是“kis-widget
”(当选择#overview时),我们的显示/隐藏代码是:
$(document).ready(function()
{
if (window.location.hash)
{
show(window.location.hash);
}
else
{
show('#overview');
}
});
function show(id)
{
$('#overview_div, #coursecontent_div, #profiles_div, #requirements_div, #fees_div').hide();
$('#tabs li a').removeClass("selected");
$(id + '_div').show();
$(id + '_link').addClass("selected");
}
非常感谢任何帮助。
谢谢
尼尔
最佳答案
How can I ensure that when tabs 2, 3, 4 or 5 are selected, this right-hand div is set to display:none?
沿着这个思路:
DOM:
TAB 1 .tab .tab-first
TAB 2 .tab
TAB 3 .tab
TAB 4 .tab
TAB 5 .tab
代码如下:
function hiderighthanddiv(evt)
{
//whatever you want
}
function showrighthanddiv(evt)
{
//whatever you want
}
$('.tab').not('.tab-first').bind('click',hiderighthanddiv);
$('.tab-first').bind('click',showrighthanddiv);
关于javascript - 使用 jQuery 选项卡显示隐藏附加内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12349335/