Javascript/HTML -- 切换可见性（当另一个 div 元素呈现可见时自动隐藏一个 div 元素）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4261363/
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
Javascript/HTML -- Toggle Visibility (Automatically causing one div element to hide when another is rendered visible)
提问by Corey K
Essentially what I am trying to do is create a website that has all of its content on the home page but only has some of the content visible at any one time. The way I read to do this is through toggling visibility.
基本上，我想要做的是创建一个网站，该网站的所有内容都在主页上，但在任何时候都只能看到部分内容。我阅读的方式是通过切换可见性。
The problem I am having is that: Assume the home page, when you first visit the website is blank (the way I want it to be). Lets say you click on the "about us" link. All of a sudden the about us section becomes visible (the way I want it to be). Now the problem that I have come across is when I know lets say click on the "products" link, I want the "products" content to become visible and the "about us" content to become invisible again. (Essentially creating the illusion of opening a new page within the same page)
我遇到的问题是：假设主页，当你第一次访问网站时是空白的（我想要的方式）。假设您单击“关于我们”链接。突然之间，关于我们部分变得可见（我想要的样子）。现在我遇到的问题是，当我知道可以说点击“产品”链接时，我希望“产品”内容变得可见，而“关于我们”内容再次变得不可见。（本质上造成在同一页面内打开新页面的错觉）
Here is the code I have come up with so far. I can make certain div elements visible and invisible (onclick) but I cant figure out how to make sure only one div element is visible at any one time.
这是我到目前为止想出的代码。我可以使某些 div 元素可见和不可见（onclick），但我无法弄清楚如何确保在任何时候只有一个 div 元素可见。
<script type="text/javascript">
function toggleVisibility() {
document.getElementById("about").style.display = "";
if(document.getElementById("about").style.visibility == "hidden" ) {
document.getElementById("about").style.visibility = "visible";
}
else {
document.getElementById("about").style.visibility = "hidden";
}
}
</script>
<script type="text/javascript">
function toggleVisibility1() {
document.getElementById("products").style.display = "";
if(document.getElementById("products").style.visibility == "hidden" ) {
document.getElementById("products").style.visibility = "visible";
}
else {
document.getElementById("products").style.visibility = "hidden";
}
}
</script>
The links to make the javascript work looks like this:
使 javascript 工作的链接如下所示：
< href="#" onclick="toggleVisibility();">About
< href="#" onclick="toggleVisibility();">关于
< href="##" onclick="toggleVisibility1();"> Products
< href="##" onclick="toggleVisibility1();">产品
回答by T.Todua
here is another, simple function
这是另一个简单的功能
<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>
<a href="#" onclick="toggle_visibility('foo');">if you click here, #foo will change visibility</a>
<div id="foo">blablabla</div>
回答by Jeff B
Without jQuery, you would want to do something like this:
如果没有 jQuery，你会想要做这样的事情：
<style type="text/css">
.content {
display: none;
}
#about {
display: block;
}
</style>
<script type="text/javascript">
function toggleVisibility(selectedTab) {
// Get a list of your content divs
var content = document.getElementsByClassName('content');
// Loop through, hiding non-selected divs, and showing selected div
for(var i=0; i<content.length; i++) {
if(content[i].id == selectedTab) {
content[i].style.display = 'block';
} else {
content[i].style.display = 'none';
}
}
}
</script>
<a href="#" onclick="toggleVisibility('about');">About</a>
<a href="#" onclick="toggleVisibility('products');"> Products</a>
<div id="about" class="content">About stuff here</div>
<div id="products" class="content">Product stuff here</div>
Example here: http://jsfiddle.net/frDLX/
这里的例子：http: //jsfiddle.net/frDLX/
jQuery makes this much easier, but if you are beginning with JavaScript, sometimes you want to see the programmatic code, so you can tell what is going on.
jQuery 使这变得更容易，但如果您开始使用 JavaScript，有时您想查看程序代码，以便了解发生了什么。
回答by mmurch
This is exactly what jquery makes easier. Take this very simple example of what you're trying to achieve:
这正是 jquery 使更容易的地方。以这个非常简单的例子来说明您要实现的目标：
<style type="text/css">
.section {
display: none;
}
</style>
<script type="text/javascript">
function toggleVisibility(newSection) {
$(".section").not("#" + newSection).hide();
$("#" + newSection).show();
}
</script>
<a href="#" onclick="toggleVisibility('about');">About</a>
<a href="#" onclick="toggleVisibility('products');"> Products</a>
<div id="about" class="section">about section</div>
<div id="products" class="section">products section</div>
回答by Websirnik
Simple solution is like this:
简单的解决方法是这样的：
<script type="text/javascript">
function toggleVisibility(divid) {
if (divid="about"){
document.getElementById("about").style.visibility = "visible";
document.getElementById("products").style.visibility = "hidden";
}
else if (divid="products")
{
document.getElementById("products").style.visibility = "visible";
document.getElementById("about").style.visibility = "hidden";
}
}
</script>
< href="#" onclick="toggleVisibility('about');">About
< href="##" onclick="toggleVisibility1('products');"> Products
回答by atlavis
use CSS display:property
使用 CSSdisplay:属性
element disappear
元素消失
document.getElementById("products").style.display = "none";
element appear and is displayed as block (default for div)
元素出现并显示为块（div 的默认值）
document.getElementById("products").style.display = "block";
I posted sample code here: jQuery: menus appear/disappear on click - V2
我在这里发布了示例代码：jQuery：单击时菜单出现/消失 - V2
PS
聚苯乙烯
Here you can find nice examples about differences between display and visibility: http://wiw.org/~frb/css-docs/display/display.html
在这里你可以找到关于显示和可见性之间差异的很好的例子：http: //wiw.org/~frb/css-docs/display/display.html
