Zasadniczo próbuję utworzyć link, który po naciśnięciu ukryje bieżący znacznik div body i pokaże inny na swoim miejscu, niestety, gdy kliknę link, pierwszy tag div body nadal się pojawia. Oto kod HTML:

<div id="body">
<h1>Numbers</h1>
</div>
<div id="body1">
Body 1
</div>

Oto kod CSS:

#body
{
height: 500px;
width: 100%;
margin: auto auto;
border: solid medium thick;
}

#body1
{
height: 500px;
width: 100%;
margin: auto auto;
border: solid medium thick;
display: hidden;
}

Oto kod JavaScript:

function changeDiv()
{
document.getElementById('body').style.display = "hidden"; // hide body div tag
document.getElementById('body1').style.display = "block"; // show body1 div tag
document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked"; // display text if JavaScript worked
}

NB: Tagi CSS są deklarowane w różnych plikach