Question

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

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

任何人都可以帮助我。我对这些网站建筑很新。如果可能，请将我重定向到视频或一些示例。提前谢谢。

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

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 个答案: