仅使用Javascript切换DIV内容

为什么我在下面添加了这个代码后它就不工作了？正如您在代码段中看到的。单击时容器#1不工作。我在上面添加了标题和内容，但没有显示出来

有什么可以代替getElementsByTagName使用的吗

函数showDiv（idInfo）{
var sel=document.getElementById（'divLinks'）.getElementsByTagName（'div'）；
对于（变量i=0；i

#容器1，
#集装箱2，
#集装箱3，
#集装箱4{
显示：无；
边框：3件纯蓝；
高度：200px；
溢出：隐藏；
}

我希望所有内容div加载到的容器。。。默认情况下，显示第一个容器内容
集装箱#1
标题
内容：
一大堆文字1

集装箱#2
一大堆文本2

集装箱#3
一大堆文本3

集装箱#4
一大堆文本4

您可以使用仅针对

divLinks

的直接子级

函数showDiv（idInfo）{
const sel=document.queryselectoral（'#divLinks>div'）；
sel.forEach（项目=>{
item.style.display=item.id==`container${idInfo}`？'block'：'none'；
});
}

#容器1，
#集装箱2，
#集装箱3，
#集装箱4{
显示：无；
边框：3件纯蓝；
高度：200px；
溢出：隐藏；
}

我希望所有内容div加载到的容器。。。默认情况下，显示第一个容器内容
集装箱#1
标题
内容：
一大堆文字1

集装箱#2
一大堆文本2

集装箱#3
一大堆文本3

集装箱#4
一大堆文本4

您可以使用仅针对

divLinks

的直接子级

函数showDiv（idInfo）{
const sel=document.queryselectoral（'#divLinks>div'）；
sel.forEach（项目=>{
item.style.display=item.id==`container${idInfo}`？'block'：'none'；
});
}

#容器1，
#集装箱2，
#集装箱3，
#集装箱4{
显示：无；
边框：3件纯蓝；
高度：200px；
溢出：隐藏；
}

我希望所有内容div加载到的容器。。。默认情况下，显示第一个容器内容
集装箱#1
标题
内容：
一大堆文字1

集装箱#2
一大堆文本2

集装箱#3
一大堆文本3

集装箱#4
一大堆文本4

您只需要获取父级子级而不是嵌套子级

修改

var sel=document.getElementById（'divLinks'）.getElementsByTagName（'div'）

与

sel=document.querySelector（“#divLinks”）.children
您只需要获取父级子级而不是嵌套子级

修改

var sel=document.getElementById（'divLinks'）.getElementsByTagName（'div'）

与

sel=document.querySelector（“#divLinks”）.children
您的
#container1
中的
p
标记表示
整个文本2
。也许这就是为什么？我已经更新了上面的片段。还是不行，你到底想怎么样？当我点击
链接n
，就会显示
容器n
。在#container1上还有两个div。当我点击#container1时它不显示。对不起，错过了！您可以使用
querySelector
选择直接子级，而不是将所有
div
作为目标。您的
#container1
中的
p
标记表示
整组文本2
。也许这就是为什么？我已经更新了上面的片段。还是不行，你到底想怎么样？当我点击
链接n
，就会显示
容器n
。在#container1上还有两个div。当我点击#container1时它不显示。对不起，错过了！您可以使用
querySelector
选择直接子对象，而不是将所有
div
sThanks！！现在开始工作了！可以在所选链接上高亮显示吗？您可以修改
showDiv
，也可以在所选链接上高亮显示/添加CSS类。比方说，我将其从标记更改为div，是否与此相同？是的，您只需选择正确的标记。因此，在您的情况下，家长现在是
linkDiv
。谢谢，祝您有愉快的一天！：-）谢谢现在开始工作了！可以在所选链接上高亮显示吗？您可以修改
showDiv
，也可以在所选链接上高亮显示/添加CSS类。比方说，我将其从标记更改为div，是否与此相同？是的，您只需选择正确的标记。因此，在您的情况下，家长现在是
linkDiv
。谢谢，祝您有愉快的一天！：-）