[英]Using jQuery show() / hide()
I am using show()
and hide()
in my jsp page, and it is working fine, but I am having trouble figuring out a way to hide my table once it is shown.我在我的 jsp 页面中使用show()
和hide()
,它工作正常,但是我无法找到一种方法来隐藏我的表格一旦显示。 HTML EX: HTML EX:
<button id="b1">show 1</button>
<button id="b2">show 2</button>
<div class="hidden" id="d1">
<div class="hidden" id="d2">
So basically I want to show div1
when button1
is clicked, and show div2
when button2
is clicked.所以基本上我想在单击button1
时显示div1
,并在单击button2
时显示div2
。 I am using hide()
/ show()
because I never want both to show at the same time.我正在使用hide()
/ show()
因为我不想同时显示两者。 So here is my script:所以这是我的脚本:
$('#b1').click(function(){
$('#d1').show();
$('#d2').hide();
});
$('#b2').click(function(){
$('#d2').show();
$('#d1').hide();
});
So this works fine, as far as showing only one at a time, but I want to add some script to this to make it where if div2
is showing, I can click on button2
and make div2
hide, and the same thing for div1
.所以这很好用,一次只显示一个,但我想添加一些脚本来使它在显示div2
的地方,我可以点击button2
并隐藏div2
,同样的事情div1
。 I know this is confusing so if you have any questions please ask.我知道这很令人困惑,所以如果您有任何问题,请提出。 thanks.谢谢。
I think you want this:我想你想要这个:
$('#b1').click(function(){
$('#d1').toggle();
});
$('#b2').click(function(){
$('#d2').toggle();
});
If you need to still make it so that only one can be shown then probably something like this:如果您仍然需要这样做以便只能显示一个,那么可能是这样的:
$('#b1').click(function(){
if($('#d1').toggle().is(":visible")){
$('#d2').hide();
}
});
$('#b2').click(function(){
if($('#d2').toggle().is(":visible")){
$('#d1').hide();
}
});
I think you need this我想你需要这个
$('#b1').click(function(){
$('#d2').hide();
$('#d1').toggle();
});
$('#b2').click(function(){
$('#d1').hide();
$('#d2').toggle();
});
You don't need to check anything, just toggle the first one and always hide the other one您无需检查任何内容,只需切换第一个并始终隐藏另一个
$('#b1').click(function(){
$('#d1').toggle();
$('#d2').hide();
});
$('#b2').click(function(){
$('#d2').toggle();
$('#d1').hide();
});
There's a toggle()
method that you can use instead of show/hide that will do this for you.您可以使用一个toggle()
方法来代替 show/hide 为您执行此操作。
With no parameters, the.toggle() method simply toggles the visibility of elements:没有参数,.toggle() 方法只是切换元素的可见性:
Source: http://api.jquery.com/toggle/来源: http://api.jquery.com/toggle/
$('#b1').click(function(){
$('#d1').toggle();
});
$('#b2').click(function(){
$('#d2').toggle();
});
if you don't use any animation, it is probably more useful to define a class in css, say, .hidden {display:"none"} and toggle it.如果您不使用任何 animation,则在 css 中定义 class 并切换它可能更有用。
Thus, you code can be something like this:因此,您的代码可以是这样的:
$("#b1, #b2").click(function() { $("#d1, d2").toggleClass("hidden") })
Try this one, if you want, and tell us, whether it works )如果你愿意,试试这个,并告诉我们它是否有效)
You can check if something is visible by this $('#someDiv:visible')
and then do appropriate handling.您可以检查此$('#someDiv:visible')
是否可见某些内容,然后进行适当的处理。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.