Question

所以我有这个代码，我将把它放在jsfiddle链接下面。我点击链接制作隐藏/显示div。唯一的问题是当我想要查看一个div（第二，第三或第四个div）时，让我们说第三个，它不会出现在顶部但是benith第一个和第二个不可见的div。任何人都知道如何做到这一点并将任何选定的div放在页面顶部？

<body>
       <div class="col-md-2">
        <ul class="nav nav-pills nav-stacked" id="menu">
            <li><a href="javascript:show('link1')" id="link1">Felge</a></li>
            <li><a href="javascript:show('link2')" id="link2">Gume</a></li>
            <li><a href="javascript:show('link3')" id="link3">Branici</a></li>
            <li><a href="javascript:show('link4')" id="link4">Farovi</a></li>
        </ul>
    </div>

    <div class="col-md-3">
        <div class="div" id="content1">
            <p>BBS</p>
            <p>ENKEI</p>
            <p>KONIG</p>
        </div>

        <div class="div" id="content2">
                <p>Michelin</p>
                <p>Hankook</p>
                <p>Sava</p>
        </div>

        <div class="div" id="content3">
            <p>AMG</p>
            <p>Brabus</p>
            <p>Original</p>
        </div>

        <div class="div" id="content4">
            <p>Angel Eyes</p>
            <p>Devil Eyes</p>
            <p>Original</p>
        </div>
    </div>

`<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

function show(id) {

    if (id == 'link1') {
        document.getElementById("content1").style.visibility = 'visible';
        document.getElementById("content2").style.visibility = 'hidden';
        document.getElementById("content3").style.visibility = 'hidden';
        document.getElementById("content4").style.visibility = 'hidden';
    }
    else if (id == 'link2') {
        document.getElementById("content1").style.visibility = 'hidden';
        document.getElementById("content2").style.visibility = 'visible';
        document.getElementById("content3").style.visibility = 'hidden';
        document.getElementById("content4").style.visibility = 'hidden';
    }
    else if (id == 'link3') {
        document.getElementById("content1").style.visibility = 'hidden';
        document.getElementById("content2").style.visibility = 'hidden';
        document.getElementById("content3").style.visibility = 'visible';
        document.getElementById("content4").style.visibility = 'hidden';
    }
    else if (id == 'link4') {
        document.getElementById("content1").style.visibility = 'hidden';
        document.getElementById("content2").style.visibility = 'hidden';
        document.getElementById("content3").style.visibility = 'hidden';
        document.getElementById("content4").style.visibility = 'visible';
    }
}

function init() {

    var divs = document.getElementsByTagName("div");
    for (i = 0; i < divs.length; i++) {
        if (divs[i].className == "div") {
            divs[i].style.visibility = 'hidden';
        }
    }
    var a = document.getElementsByTagName("a");
    a.onclick = show;
}

window.onload = init;

`

https://jsfiddle.net/4qq6xnfr/

Answer 1

visibility: hidden会隐藏元素，但会占用空间。您需要使用display: none隐藏元素：

document.getElementById("content1").style.display = 'block';
document.getElementById("content2").style.display = 'none';
document.getElementById("content3").style.display = 'none';
document.getElementById("content4").style.display = 'none';

此外，您可以稍微优化代码。也许是这样的：

function show(id) {
    var number = id.replace('link', '');
    var blocks = document.querySelectorAll("[id^=content");
    for (var i = 0; i < blocks.length; i++) {
        blocks[i].style.display = 'none';
    }
    document.querySelector('#content' + number).style.display = 'block';
}

演示： https://jsfiddle.net/4qq6xnfr/3/

Answer 2

使用：

element.style.display = 'none'; // Hide
element.style.display = 'block'; // Show

Answer 3

实现这一目标的最有效方法如下：

将javascript:show('link1')，javascript:show('link2')等所有链接更改为#content1，#content2等。
您现在可以删除所有的javascript代码。
创建一个新的CSS样式表（或使用<style>标签），并在样式表中写下以下内容 -
```
.div {
  display:none;
}

.div:target {
  display:block;
}
```

就是这样！我希望这能帮助你。

使用链接隐藏和显示div

3 个答案: