javascript - 替换html/javascript中可以替换的div

Question

嗨，我正在尝试用其他 div 替换一些 div，这工作正常，但是当我尝试替换第二个 div 时，它们不再改变。

基本上，我正在尝试创建一个“ Wine 之旅”，让用户选择一些选项并生成与之搭配的完美 Wine 。

您会看到几个选项(img 链接)，如果您单击其中一个，div 的内容就会发生变化，并显示另一组可单击的图像，让您更深入地选择优质 Wine 。

HTML:

<div id"Gelegenheid"> 
    <a href="#" class="hvr-grow" onClick = "continueTour(1)"><img src="Images/Ontbijt.jpg" id="ontbijt" alt="Ontbijt"></a>
    <a href="#" class="hvr-grow" onClick = "continueTour(2)"><img src="Images/Borrel.jpg" id="borrel" alt="Borrel"></a>
    <a href="#" class="hvr-grow" onClick = "continueTour(3)"><img src="Images/Dinner.jpg" id="feest" alt="Diner"></a>
    <a href="#" class="hvr-grow" onClick = "continueTour(4)"><img src="Images/Feest.jpg" id="diner" alt="Feest"></a> 
</div>
<div id"Ontbijt" style="display: none"> Some content that shows trough the "tour"</div>
<div id"Borrel" style="display: none"> Some content that shows trough the "tour"</div>
<div id"Dinner" style="display: none"> 
    <a href="#" class="hvr-grow" onClick = "continueTour(5)"><img src="Images/White.jpeg" id="ontbijt-licht" alt="ontbijt-licht"></a>
</div>
<div id"Dinner-detail-voor" style="display: none"> Some content that shows trough the "tour"</div>
<div id"Dinner-detail-head" style="display: none"> Some content that shows trough the "tour"</div>

JavaScript:

function continueTour(i) {
if (i==1) {
    document.getElementById("Gelegenheid").innerHTML = document.getElementById("Ontbijt").innerHTML;
} else if (i==2) {
    document.getElementById("Gelegenheid").innerHTML = document.getElementById("Borrel").innerHTML;
} else if (i==3) {
    document.getElementById("Gelegenheid").innerHTML = document.getElementById("Diner").innerHTML;
} else if (i==4) {
    document.getElementById("Gelegenheid").innerHTML = document.getElementById("Feest").innerHTML;
} else {
    document.getElementById("Dinner").innerHTML = document.getElementById("Dinner-detail-voor").innerHTML;
}
}

所以基本上，如果您单击“Gelegenheid”div 内的链接，您将被带到例如晚餐，但问题是，晚餐内还有更多链接，我想将它们链接到例如“晚餐” -详细信息”

我想让它与核心 JavaScript 一起工作(所以没有 JQuery)，但我不知道发生了什么？ 提前致谢!

Answer 1

找到了答案。

已添加

document.getElementById("from").style.display = "none" ;
document.getElementById("to").style.display = "table" ;

对于每个 javscript 索引函数，现在它可以工作，其中“from”是父项，“to”是链接到的子项，不是很简洁，但可以工作，

如果有人有更短或替代的解决方案，请随时发布!