Javascript:显示一个div的内容，使其他div不可见

Question

我正在尝试编写一个函数，该函数接受 div 的 id，根据其他 id 列表检查该 id，显示与传入 id 相关的 div，并导致所有其他 div 的 id不显示列表。

<script type="text/javascript">
function display_page(id) {
//list of ids that I want to check against
   var pages = ['home', 'about', 'listen', 'more']; 
    for (var i=0; i<pages.length; i++) {
        var e = document.getElementById(pages[i]);
        if (pages[i] == id){
            e.style.display = 'block';
            alert(e);
        } 
        else{
             e.style.display = 'none';  
            alert(e);
        }
    }
</script> 

我的函数调用结构如下:

<li class="active" class="test"><a href="#" onclick="display_page('home');">Home</a></li>

不知道为什么这不起作用——请注意，我的 ID 是唯一的，所以我不认为这是问题所在。尽管单击相关链接(如上面发布的链接)，但警报并未显示。感谢您的帮助!

Answer 1

您可以使用querySelectorAll来帮助这里:

function display_page(id) {

    var pages = document.querySelectorAll('#home, #about, #listen, #more');

    for (var i=0, iLen=pages.length; i<iLen; i++) {
      pages[i].style.display = pages[i].id == id? '' : 'none';
    }
}

我想知道何时将迭代器添加到 NodeList 接口(interface)中，以便我们可以执行以下操作:

var id = 'home';
document.querySelectorAll('#home, #about, #listen, #more').forEach(function(el) {
    el.style.display = el.id == id? '' : 'none';
});

请注意，首选在“none”和“”(空字符串)之间切换，以便元素采用其默认或继承的样式，并且您不必对可能的内容进行硬编码。

哦，没有 qSA:

function display_page(id) {
    var ids = ['home', 'about', 'listen', 'more'];

    for (var i=0, iLen=ids.length; i<iLen; i++) {
      page = document.getElementById(ids[i]);
      page.style.display = page.id == id? '' : 'none';
    }
}

这取决于 ES5 forEach:

function display_page(showId) {
    ['home', 'about', 'listen', 'more'].forEach(function(id) {
        var page = document.getElementById(id);
        page.style.display = page.id == showId? '' : 'none';
    });
}