gpt4 book ai didi

javascript - GetElementsByTagNames 和 block 显示

转载 作者:行者123 更新时间:2023-11-28 03:16:31 25 4
gpt4 key购买 nike

我正在使用 HTML、CSS 和 JavaScript 写一篇“长读”文章,我想通过添加“目录”来改进整个文本的导航。这可能看起来很奇怪,但我希望我可以通过在单击标题(h1、h2、h3 ...)时隐藏包裹在 div 标签中的所有内容来做到这一点。因此,页面上只会显示标题,一个接一个,看起来就像一个花哨的目录。由于我是编程新手,所以我正在学习。目前,找到一个合适的方法对我来说并不明显。

这是我在 header 标记中使用的内容。

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

当然,这是一个非常简单的 JS“触发器”函数,仅适用于一个已识别的元素。

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 方法,但我不知道如何使它们正常工作,因为它正在处理数组...

如有任何帮助,我们将不胜感激。这是我第一次使用这个网站,我希望我遵守相应的规则。由于我的英语不是很好,我也很感激任何指向可以向我展示相关方法的解决方案的链接。

非常感谢你!

最佳答案

试试这个,点击第一个元素(切换)

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

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

<h1>not hide</h1>

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

需要说明的是,我做了一个 fiddle ,但这段代码似乎只有在我的浏览器中测试后才能工作。不知道为什么

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";
}
}
}

关于javascript - GetElementsByTagNames 和 block 显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27384422/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com