如何显示隐藏的 DIV 并在打开其他 div 时自动隐藏它答案

【问题标题】：How to show a hidden DIV and auto hide it when other div is opened如何显示隐藏的 DIV 并在打开其他 div 时自动隐藏它
【发布时间】：2014-03-05 20:21:42
【问题描述】：

我正在尝试建立一个仅包含一个页面（index.html）的网站，其中有divs，基本上将用作主页内的页面。我知道我们需要 jquery 或 java 来实现这一点。但我是编程新手。

我只需要大约 8 个 div（换句话说，一个 html 文件中有 8 个页面）。我需要将这些 div 链接到导航栏导航，当我单击任何导航时，（隐藏的）div 应该像滚动效果一样下降。此外，如果我单击其他导航，则当前打开的 div 应该会自动消失，而新的 div 应该会取而代之。

谁能帮帮我。我对这些网站建筑很陌生。如果可能，请将我重定向到视频或一些示例。提前谢谢你。

【问题讨论】：

你试过什么？您是否寻找过任何可能为此设计的库？
是的，我尝试了很多东西，但没有奏效。在互联网上使用过的图书馆和一些编码。
你可以尝试插件 (outyear.co.uk/smint) 或简单地将页面内容放在单个 div 中，为它们分配一个类名并隐藏除目标 div 之外的所有内容
您可以查看 JqueryUI 库中的选项卡(jqueryui.com/tabs/#default)。示例：jsfiddle.net/Hb7Za/1

标签： javascript jquery html css

【解决方案1】：

Demo

导航：

<nav>
<ul>
<li><a href="#foo">Foo</a></li>
<li><a href="#bar">Bar</a></li>
</ul>
</nav>

页数：

<main>
<section id="foo">Foo's contents</section>
<section id="bar">Bar's contents</section>
</main>

CSS：

main > section {
    display: none;
}
:target {
    display: block;
}

_{请注意:target 伪类在旧浏览器上不起作用。}

【讨论】：

【解决方案2】：

你应该可以做这样的事情：

var divs = ["div1", "div2", "div3", "div4", "div5", "div6", "div7", "div8"];
var visibleDivId = null;

function toggleVisibility(divId) {
    if (visibleDivId === divId) {
        visibleDivId = null;
    } else {
        visibleDivId = divId;
    }
    hideNonVisibleDivs();
}

function hideNonVisibleDivs() {
    var i, divId, div;
    for (i = 0; i < divs.length; i++) {
        divId = divs[i];
        div = document.getElementById(divId);
        if (visibleDivId === divId) {
            div.style.display = "block";
        } else {
            div.style.display = "none";
        }
    }
}

然后只需将 onclick 事件添加到相应 div 的链接中，如下所示：

第一个链接（显示 div2 并隐藏所有其他链接）：

<a href="#" onClick="toggleVisibility('div2');return false;">

只需对其他 div 重复该链接格式即可。

【讨论】：

fishboy... 需要问你，你提供给我的代码？无论如何，您可以为其添加过渡效果吗？请添加到您提供的相同代码中。谢谢 :)

【解决方案3】：

动画需要 jquery，所以结构与我原来的答案不同：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>jquery slideup-down</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.js'></script>
<style type='text/css'>
.targetDiv {
display: none
}
</style>
<script type='text/javascript'>
jQuery(function () {
    jQuery('.showSingle').click(function () {
        var index = $(this).index(),
            newTarget = jQuery('.targetDiv').eq(index).slideDown();
        jQuery('.targetDiv').not(newTarget).slideUp();
    });
});
</script>
</head>
<body>
<a class="showSingle" target="1">Div 1</a>
<a class="showSingle" target="2">Div 2</a>
<a class="showSingle" target="3">Div 3</a>
<a class="showSingle" target="4">Div 4</a>
<a class="showSingle" target="1">Div 5</a>
<a class="showSingle" target="2">Div 6</a>
<a class="showSingle" target="3">Div 7</a>
<a class="showSingle" target="4">Div 8</a>
<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>
<div id="div1" class="targetDiv">Lorum Ipsum5</div>
<div id="div2" class="targetDiv">Lorum Ipsum6</div>
<div id="div3" class="targetDiv">Lorum Ipsum7</div>
<div id="div4" class="targetDiv">Lorum Ipsum8</div>  
</body>
</html>

【讨论】：