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

Question

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

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

谁能帮帮我吗。 我对这些网站大楼很陌生。 如果可能，请将我重定向到视频或一些示例。 先感谢您。

Answer 1

演示版

导航：

<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伪类在旧的浏览器上不起作用。}

Answer 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重复该链接格式即可。

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

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

问题描述

3 个解决方案

解决方案1
2 2014-02-28 19:58:43

解决方案2
1 已采纳 2014-02-28 20:02:15

解决方案3
0 2014-03-05 12:21:42

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

问题描述

3 个解决方案

解决方案1 2 2014-02-28 19:58:43

解决方案2 1 已采纳 2014-02-28 20:02:15

解决方案3 0 2014-03-05 12:21:42

解决方案1
2 2014-02-28 19:58:43

解决方案2
1 已采纳 2014-02-28 20:02:15

解决方案3
0 2014-03-05 12:21:42