9

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

我遇到的问题是：假设主页，当您第一次访问该网站时是空白的（我想要的方式）。假设您单击“关于我们”链接。突然间，关于我们部分变得可见（我想要的方式）。现在我遇到的问题是，当我知道点击“产品”链接时，我希望“产品”内容变得可见，而“关于我们”的内容再次变得不可见。（本质上创造了在同一页面中打开新页面的错觉）

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

4

5 回答 5

4

这是另一个简单的功能

<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>
于 2013-03-26T12:05:56.890 回答
2

如果没有 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>

这里的例子：http: //jsfiddle.net/frDLX/

jQuery 使这变得更容易，但如果您从 JavaScript 开始，有时您希望查看程序代码，以便了解发生了什么。

于 2010-11-23T22:26:45.163 回答
1

这正是 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>
于 2010-11-23T22:16:15.180 回答
1

简单的解决方案是这样的：

    <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
于 2010-11-23T22:18:44.290 回答
0

使用 CSSdisplay:属性

元素消失

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

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

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

我在这里发布了示例代码：jQuery：菜单在点击时出现/消失 - V2

附言

在这里你可以找到关于显示和可见性之间差异的很好的例子：http ://wiw.org/~frb/css-docs/display/display.html

于 2010-11-23T22:13:19.797 回答