Question

您好我正在尝试用其他div替换一些div，这样可以正常工作但是当我尝试更换第二个div时，它们不会再改变了。

Basicaly我正在尝试创建一个“winetour”，让用户可以选择一些选项并生成完美的葡萄酒。

您会看到一些选项（img链接），如果您点击其中一个div的内容更改并呈现另一组可点击的图像，则会让您更深入地选择优质葡萄酒。

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里面的一个链接，你将被带到例如晚餐，但问题是，在晚餐内有更多链接，我想把它们链接到例如“晚餐” -detail-VOOR“

我想使用核心JavaScript（所以没有JQuery），但我不知道发生了什么？提前谢谢！

Answer 1

找到答案。

加

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

到每个javscript索引函数，现在它适用于＆＃39;来自＆＃39;是父亲和＆＃39;到是一个与之相关联的孩子，不是很整洁但是有效，

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

Answer 2

首先我们为所有内容创建一个数组，数组是基数0所以我们从函数myFunction（0）开始;接下来，我们创建一个带有更新变量的标签。 if语句用于在命中max时重置变量。希望这有帮助。

http://jsfiddle.net/xgay3f83/3/

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

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

2 个答案: