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

Question

我正在尝试编写一个函数，该函数接受div的id，对照其他id的列表检查该id，显示与传入的id相关的div，并使列表中的id的所有其他div变为不显示。

<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接口，以便我们可以这样做：

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';
    });
}