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

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中的内容。但是一旦盒子成了文件，我只能改变里面的内容。如果再次单击实际内容中的按钮，什么都不会发生，但我想清除内容。

也许有人能解释我或者联系我这样一个职务的名字吗？

提前感谢！

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的值相同。如果是，那么清空它。