Javascript 如何在两个div之间切换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4936715/
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
How to toggle between two divs
提问by Ryan Bennett
I am trying to toggle between two divs. For example, onload, I want the left content to show and the right content will remain hidden. If I click the right div, I want the left content to hide and the right content to appear and vise versa. I am very new to javascript but here is what I have. I can't seem to get it to work. Please help...
我试图在两个 div 之间切换。例如，onload，我希望左边的内容显示出来，右边的内容将保持隐藏。如果我点击右边的 div，我希望左边的内容隐藏，右边的内容出现，反之亦然。我对 javascript 很陌生，但这就是我所拥有的。我似乎无法让它工作。请帮忙...
Here is my HTML code:
这是我的 HTML 代码：
<div onclick="toggle_visibility('left');">
Left
</div>
<div onclick="toggle_visibility('right');">
Right
</div>
<div id="left" style="display: block;">
This is the content for the left side
<div>
<div id="right" style="display: none;">
This is the content for the ride side
</div>
Here is the Javascript I am using:
这是我正在使用的 Javascript：
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
回答by ?ime Vidas
Live demo:http://jsfiddle.net/PauWy/1/
现场演示：http : //jsfiddle.net/PauWy/1/
HTML:
HTML：
<p id="toggle">
<span> Left </span>
<span> Right </span>
</p>
<div id="left"> LEFT CONTENT </div>
<div id="right"> RIGHT CONTENT </div>
JavaScript:
JavaScript：
$('#toggle > span').click(function() {
var ix = $(this).index();
$('#left').toggle( ix === 0 );
$('#right').toggle( ix === 1 );
});
CSS (to hide the right DIV onload):
CSS（在加载时隐藏正确的 DIV）：
#right { display:none; }
Put the JavaScript code at the bottom of the page.
将 JavaScript 代码放在页面底部。
<script>
$(function() {
// put jQuery code here
});
</script>
</body>
Notice how the SCRIPT element is located at the end of the BODY element. Also, notice that the jQuery code should be inside the ready handler: $(function() { ... code ... });
请注意 SCRIPT 元素如何位于 BODY 元素的末尾。另外，请注意 jQuery 代码应该在就绪处理程序中：$(function() { ... code ... });
回答by mezz
Here is a small example that toggles between two html documents. The function is first called when the body loads. U need to replace 1.html and 2.html with the two pages you want to flip between. If you want a longer delay, replace 3000 with whatever u want. the timer value is in milliseconds, so if you want 20 seconds its 20000.
这是一个在两个 html 文档之间切换的小例子。当主体加载时首先调用该函数。您需要将 1.html 和 2.html 替换为要在其间翻转的两个页面。如果你想要更长的延迟，用你想要的任何东西替换 3000。计时器值以毫秒为单位，因此如果您想要 20 秒，则为 20000。
<html>
<head>
<script type="text/javascript">
top.visible_id = 'right';
function toggle_visibility() {
var right_e = document.getElementById('right');
var left_e = document.getElementById('left');
if (top.visible_id == 'right') {
right_e.style.display = 'none';
left_e.style.display = 'block';
top.visible_id = 'left';
} else {
right_e.style.display = 'block';
left_e.style.display = 'none';
top.visible_id = 'right';
}
var t = setTimeout("toggle_visibility()",3000);
}
</script>
</head>
<body onload="toggle_visibility();">
<div id="left" >
<iframe src="1.html"></iframe>
</div>
<div id="right" >
<iframe src="2.html"></iframe>
</div>
</body>
</html>
回答by stephen776
Since u tagged the question jqueryill assume your open to a jquery solution. It will make this very simple. Check out the sample jsfiddle below...
由于jquery您标记了问题，因此假设您对 jquery 解决方案持开放态度。这将使这变得非常简单。查看下面的示例jsfiddle...
of course you will need some css for styling but clicking the div in the sample will switch between the two divs
当然，您需要一些 css 来设置样式，但单击示例中的 div 将在两个 div 之间切换
回答by bbrame
For starters, the closing tag for is missing. Pesky things, those.
对于初学者来说，缺少结束标记。讨厌的东西，那些。
Second, you need to keep track of the current visible div so that you can hide it. The following should work.
其次，您需要跟踪当前可见的 div，以便您可以隐藏它。以下应该工作。
<html>
<head>
<script type="text/javascript">
top.visible_div_id = 'right';
function toggle_visibility(id) {
var old_e = document.getElementById(top.visible_div_id);
var new_e = document.getElementById(id);
if(old_e) {
console.log('old', old_e, 'none');
old_e.style.display = 'none';
}
console.log('new', new_e, 'block');
new_e.style.display = 'block';
top.visible_div_id = id;
}
</script>
</head>
<body onload="toggle_visibility('left');">
<div onclick="toggle_visibility('left');">
Left
</div>
<div onclick="toggle_visibility('right');" >
Right
</div>
<div id="left" >
This is the content for the left side
</div>
<div id="right" >
This is the content for the ride side
</div>
</body>
</html>
回答by William
You are only toggling the visibility for 1 of the 2 elements each time. When you click on the left, it's going to disappear, but you didn't tell the right side to appear. Try:
您每次只切换 2 个元素中的 1 个的可见性。当你点击左边时，它会消失，但你没有告诉右边出现。尝试：
<div onclick="toggle_visibility('left');toggle_visibility('right');">
Left
</div>
<div onclick="toggle_visibility('right');toggle_visibility('left');">
Right
</div>
