Javascript JS/jQuery（隐藏 div，点击时显示 div）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5454023/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JS/jQuery (Hide div, show div on click)
提问by Latox
I have two buttons.
我有两个按钮。
I have two divs I want to show.
我有两个想要展示的 div。
Each divs have different content.
每个 div 都有不同的内容。
I want both divs to only take up the same amount of space on the page.
我希望两个 div 只在页面上占用相同的空间。
I want it so on page load, div1 is shown, and if they click link div2, div1 disappears and div2 appears in its place.
我希望在页面加载时显示 div1，如果他们单击链接 div2，div1 消失，div2 出现在其位置。
What is the best way to go about doing this? and how?
这样做的最佳方法是什么？如何？
回答by joatis
All the initial CSS and onload stuff aside and you're using jquery, I think you're looking for something like
抛开所有初始 CSS 和 onload 内容，您正在使用 jquery，我想您正在寻找类似的东西
$("#button2").click(function(){
$("#div1").hide();
$("#div2").show();
})
回答by Satadru Biswas
page load:
页面加载：
$('#div2').hide();
click link:
点击链接：
$('#div1').hide(); $('#div2').show();
回答by Carls Jr.
see the sample code here... hope this helps :)
请参阅此处的示例代码...希望这会有所帮助:)
Note: Hi Kyle, I modified my code, added a few lines on it courtesy of jessegavin
注意：嗨凯尔，我修改了我的代码，在 jessegavin 的帮助下添加了几行
回答by jessegavin
See working version on jsFiddle: http://jsfiddle.net/7jWVt/
在 jsFiddle 上查看工作版本：http: //jsfiddle.net/7jWVt/
HTML
HTML
<button id="button1">One</button>
<button id="button2">Two</button>
<div id="div1">
Here is line one<br/>
Here is line two<br/>
Here is line three<br/>
Here is line four
</div>
<div id="div2">
Here is line one<br/>
Here is line two
</div>
<p> Here's some other paragraph to show that
the divs will take up the same amount of space</p>
jQuery
jQuery
$(function() {
// Make the divs have equal heights
var h1 = $("#div1").height();
var h2 = $("#div2").height();
$("#div1,#div2").height(Math.max(h1,h2));
// Then hide the second div
$("#div2").hide();
// Then add a click handlers to the buttons
$("#button1").click(function() {
$("#div1").show();
$("#div2").hide();
});
$("#button2").click(function() {
$("#div1").hide();
$("#div2").show();
});
})
回答by Andy Schlosser
The way that I'd go about doing it is by giving each one a unique ID first (div1 and div2 would suffice). The div you want hidden should have inside the tag style="display:none" Then within the tag of the div that you want to click to show the hidden parts, use this type of code: onClick="document.getElementById('div1').style.display='block'; document.getElementById('div2').style.display='none';" Just reverse div1 and div2 on the other for the inverse effect.
我要做的方法是首先给每个人一个唯一的 ID（div1 和 div2 就足够了）。你想要隐藏的 div 应该有标签 style="display:none" 然后在你想要点击以显示隐藏部分的 div 标签内，使用这种类型的代码：onClick="document.getElementById('div1 ').style.display='block'; document.getElementById('div2').style.display='none';" 只需将另一个 div1 和 div2 反转即可获得相反的效果。
This was assuming div1 was hidden and div2 was visible at the start.
这是假设 div1 在开始时被隐藏而 div2 是可见的。
回答by SLaks
In a clickhandler, call $('#div1').hide()and $('#div2').show().
在click处理程序中，调用$('#div1').hide()和$('#div2').show()。
回答by Dejan Marjanovic
function showdiv(id){
$("#container div").hide(0); //Hide all DIV's within container
$("#container #" + id).show(); //Show DIV with certain ID
}
Then in HTML...
然后在 HTML...
<a href="javascript:;" onclick="javascript:showdiv('about');">About Us</a>
<a href="javascript:;" onclick="javascript:showdiv('contact');">Contact</a>
You should add event listeners, but I guess you did it something like this..
您应该添加事件侦听器，但我猜您是这样做的。
