Javascript/HTML——切换可见性（当另一个div元素呈现为可见时，自动导致一个div元素隐藏）

基本上，我正在尝试创建一个网站，它的所有内容都在主页上，但在任何时候都只有部分内容可见。我阅读的方法是通过切换可见性

我遇到的问题是：假设你第一次访问网站时，主页是空白的（我希望它是这样的）。假设你点击“关于我们”链接。突然，“关于我们”部分变得清晰可见（我希望它是这样的）。现在我遇到的问题是，当我知道（比如）点击“产品”链接时，我希望“产品”内容变得可见，“关于我们”内容再次变得不可见。（本质上创造了在同一页面中打开新页面的幻觉）

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

函数toggleVisibility（）{
document.getElementById（“关于”）.style.display=“”；
if（document.getElementById（“about”）.style.visibility==“hidden”）{
document.getElementById（“关于”）.style.visibility=“可见”；
}
否则{
document.getElementById（“关于”）.style.visibility=“隐藏”；
}
}
函数切换可见性1（）{
document.getElementById（“产品”）.style.display=“”；
if（document.getElementById（“产品”）.style.visibility==“隐藏”）{
document.getElementById（“产品”）.style.visibility=“可见”；
}
否则{
document.getElementById（“产品”）.style.visibility=“隐藏”；
}
}

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

    <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

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

关于

---

产品使用CSS

显示：

属性

元素消失

document.getElementById("products").style.display = "none";

元素出现并显示为块（默认为div）

我在这里发布了示例代码：

PS

---

在这里，您可以找到显示和可见性之间差异的好例子：

这正是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>

.科{
显示：无；
}
功能切换可见性（newSection）{
$（“.section”）.not（“#”+newSection.hide（）；
$（“#”+newSection.show（）；
}
关于部分
产品组

简单的解决方案如下：

    <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

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

函数切换可见性（divid）{
if（divid=“about”）{
document.getElementById（“关于”）.style.visibility=“可见”；
document.getElementById（“产品”）.style.visibility=“隐藏”；
}
else if（divid=“产品”）
{
document.getElementById（“产品”）.style.visibility=“可见”；
document.getElementById（“关于”）.style.visibility=“隐藏”；
}
}
关于
产品

如果没有jQuery，您可能希望执行以下操作：

    <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

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

.内容{
显示：无；
}
#关于{
显示：块；
}
功能切换可见性（selectedTab）{
//获取内容div的列表
var content=document.getElementsByClassName（'content'）；
//循环浏览，隐藏未选定的div，并显示选定的div
对于（var i=0；i，这里是另一个简单的函数

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


功能切换\u可见性（id）{
var e=document.getElementById（id）；
如果（e.style.display=='block'）
e、 style.display='none'；
其他的
e、 style.display='block'；
}
喋喋不休
如果使用jQuery，可以使用$（'#products'）.css（'display'，'none'））；这是我给出的答案的一个很好的非jquery版本。除了使用=而不是==检查字符串的相等性之外，如果我想使用5个不同的部分而不是2个，这是否可行？这将适用于更多的部分，但对于每个新的部分，您必须向每个其他/if添加一行代码来维护它。如果您使用我的jqu我的回答是，你不必做任何额外的事情来添加/删除部分。谢谢，这确实有所帮助，但我真正想做的是或多或少地实现www.fuelbrandinc.com所具有的功能。我首先让所有内容都不可见，然后根据你点击的链接一次显示一个部分。只需删除
#关于样式定义中的{display:block；}
。