Javascript / HTML - 切换可视性（当另一个元素呈现可见时，自动导致一个div元素隐藏） [英] Javascript/HTML -- Toggle Visibility (Automatically causing one div element to hide when another is rendered visible)

问题描述

基本上我想要做的是创建一个网站，其主页上的所有内容，但只有一些内容在任何时候都可见。我阅读的方式是通过切换可视性。

我遇到的问题是：假设首页，当你第一次访问网站是空白的（我希望它的样子）。让我们说你点击关于我们链接。突然之间，关于我们的部分变得可见（我想要的方式）。现在我遇到的问题是，当我知道让我们说点击产品链接时，我希望产品内容变得可见，并且关于我们的内容再次变得不可见。 （本质上是在同一页面中创建一个打开新页面的错觉）

这是我到目前为止所提供的代码。我可以使某些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> 
  

使JavaScript工作的链接如下所示：

< href =＃onclick =toggleVisibility（）;>关于

< href =##onclick =toggleVisibility1（）;>产品

解决方案

>

 < 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'）;>如果您点击此处，#foo会更改可见性< / a> 
< div id =foo> blablabla< / div> 
  

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.

<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:

< href="#" onclick="toggleVisibility();">About

< href="##" onclick="toggleVisibility1();"> Products

解决方案

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>

这篇关于Javascript / HTML - 切换可视性（当另一个元素呈现可见时，自动导致一个div元素隐藏）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！