Question

我正在写一篇长篇大论＆＃34;文章，使用HTML，CSS和JavaScript，我想通过添加一个＆＃34;目录和＃34;来改进整个文本的导航。这可能看起来很奇怪，但我希望我可以通过在点击标题（h1，h2，h3 ......）时隐藏div标签中包含的每个内容来实现。因此，只有标题会一直显示在页面上，它看起来像一个精美的目录。由于我是编程新手，所以我即时学习。找到一个合适的方法对我来说并不明显。

这是我在标头标签中使用的内容。

<h1 onclick="ff('hide');">

这是一个非常简单的JS＆＃34;触发器＆＃34;功能，仅使用一个单独的标识元素，当然。

function ff(id)
{
    if(document.getElementById(id).style.display == "none")
        document.getElementById(id).style.display = "block";
    else    document.getElementById(id).style.display = "none";
}

我怎样才能使该功能适用于文档的每个div标签？我试图使用getElementsByClass或getElementsByTagName方法，但我不知道如何使它们正常工作，因为它使用数组...

任何帮助将不胜感激。这是我第一次使用这个网站，我希望我能相应地遵守这些规则。由于我不是一位优秀的英语演讲者，我也非常感谢任何可以向我展示相关方式的解决方案的链接。

非常感谢你！

Answer 1

尝试使用此功能，单击第一个元素（切换）

<h1 onclick="ff('toHide');">toggle</h1>

<h1 class="toHide">hide</h1>

<h1>not hide</h1>

<h1 class="toHide">hide</h1>

为了清楚起见，我已经做了一个小提琴，但这个代码似乎只有在我的浏览器中进行测试才有效。不知道为什么

function ff(c) {
    //get array
    var arr = document.getElementsByClassName(c);
    //single element
    var el = "";

    //loop through your collection
    for (i = 0; i < arr.length; i++) {
        el = arr[i];
        //the function
        if (el.style.display == "none") {
            el.style.display = "block"; 
        }else {
            el.style.display = "none";
        }
    }
}

GetElementsByTagNames和块显示

1 个答案: