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

嗨，我正在尝试用其他div替换一些div，这很好，但是当我尝试替换第二批div时，它们不再改变

基本上，我正在尝试创建一个“葡萄酒之旅”，让用户选择一些选项，并生成完美的葡萄酒

你会看到几个选项（img链接），如果你点击其中一个，div的内容会发生变化，并显示另一组可点击的图像，让你在选择佳酿的过程中更深入

HTML:

基本上，如果你点击“Gelegenheid”分区内的链接，你会被带到例如晚餐，但问题是，晚餐内还有一些链接，我想把它们链接到例如“晚餐细节voor”

我想让它与核心JavaScript（所以没有JQuery）一起工作，但我不知道发生了什么？

---

提前谢谢

首先我们为所有内容创建一个数组，数组以0为基数，因此我们从函数myFunction（0）开始；接下来，我们创建一个标记，其中包含更新的变量。if语句用于在点击max时重置变量。希望这有帮助

功能连续图（一）{
var content=['content 1'、'content 2'、'content 3'、'content 4']；
var target=document.getElementById（'target'）；
var next=i+1；
var end=content.length；
如果（下一步>结束）{
i=0；
next=1；
}
var openTag=''；
target.innerHTML=openTag+content[i]+closeTag；
}

找到了答案

增加

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

---

如果有人有一个较短的或替代的解决方案，请随时发布

您的替换项不再具有

onClick

。在第7-9行，您缺少=in style正确的语法是style=“Your:code；”onClick是否存在？style的语法是一个错误，抱歉，现在修复了。谢谢你的输入，但这不是我想要的。我相信这类滚动会按升序在内容中滚动，但我正在寻找一个分支巡演，因此，例如，您选择用户获得的晚餐，并提供3个其他选择，专门用于晚餐，这进一步定义了选择。

<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>

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

function continueTour(i) {
var content = ['content 1', 'content 2', 'content 3', 'content 4'];
var target = document.getElementById('target');
var next = i + 1;
var end = content.length;

if(next>end) {
    i = 0;
    next = 1;
}

var openTag = '<a href="#" class="hvr-grow" onClick = "continueTour('+next+')">'; 
var closeTag = '</a>';

target.innerHTML = openTag+content[i]+closeTag;    
 }

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