Question

我想知道如何创建可以更改div内容的按钮，如果再次点击最后点击的按钮（实际内容）而不是更改，则应该清除div。

到目前为止，我获得了创建和更改内容的代码：

HTML

<button onclick="changeNavigation('bl1')">Techniker</button>
<button onclick="changeNavigation('bl2')">Übersetzer</button>
<button onclick="changeNavigation('bl3')">Qualitychecker</button>

<div id="text_content"></div>

<div id="bl1">
    <p>This is text 1</p>
</div>
<div id="bl2">
    <p>This is text 2</p>
</div>
<div id="bl3">
    <p>This is text 3</p>
</div>

JS

function changeNavigation(id) {
    document.getElementbyId('text_content').innerHTML= document.getElementbyId(id).innerHTML;
}

到目前为止，使用此代码，我可以通过单击bottons来更改div中的内容。但是一旦盒子被filex我只能改变内部内容。如果我再次点击实际内容中的按钮没有任何反应，但我想清除内容。

也许有人可以解释我或给我链接这种功能的名称吗？

提前致谢！

Answer 1

我不确定你想要到这里来的是什么？如果您单击导航项两次以清除div？

若是，请尝试这样的事情

function changeNavigation(id) {
    var textContent = document.getElementbyId('text_content'),
        containerDiv = document.getElementbyId(id);

    if(textContent.innerHTML === containerDiv.innerHTML){
        textContent.innerHTML = '';
    } else {
        textContent.innerHTML = containerDiv.innerHTML
    }
}

我们在这里做的是检查text_content是否与您从中获取内容的div相同。如果是，那就把它清空。

html按钮更改div内容或再次切换它

1 个答案: