Javascript 显示/隐藏

Question

我不知道是什么错误:

<script>
                function craft()
    {
    document.getElementById(craft).style.visibility="visible";
    document.getElementById(smell).style.visibility="hidden";
    document.getElementById(other).style.visibility="hidden";
    }

function smell()
{
document.getElementById(craft).style.visibility="hidden";
document.getElementById(smell).style.visibility="visible";
document.getElementById(other).style.visibility="hidden";
}

function other()
{
document.getElementById(craft).style.visibility="hidden";
document.getElementById(smell).style.visibility="hidden";
document.getElementById(other).style.visibility="visible";
}
        </script>



    <a onclick ="craft()" href="#">Craft</a><br>
    <a onclick ="smell()" href="#">Smell</a><br>
    <a onclick ="other()" href="#">Other</a><br>
    <div id="craft" style="display: none;" >CraftCraftCraftCraftCraftCraftCraft</div><br>
      <div id="smell" style="display: none;" >SmellSmellSmellSmellSmellSmellSmell</div><br>
        <div id="other" style="display: none;" >OtherOtherOtherOtherOtherOtherOther</div><br>

我想做一些像菜单一样的东西。当我点击 Craft 按钮时，会出现 contain

我找不到错误... 我在浏览器中尝试了代码，但是出现了链接...当我点击它们时，没有任何反应...

Answer 1

使用 ' document.getElementById() 中的 ID .例如:

document.getElementById('craft').style.visibility="visible";

没有它们，JavaScript 将尝试解释 craft作为变量(保存 ID 的值)而不是作为表示实际 ID 的字符串。

编辑

再看一眼，您没有使用一致的属性来隐藏您的 <div>小号:

一开始你用display: none;隐藏它们然后尝试让它们显示为 visibility: visible; .你必须在这里保持一致。要么使用 display或 visibility .两者在实际操作上有所不同。

所以要么调整你的 JavaScript 以使用 display像这样:

document.getElementById('craft').style.display = "block";

或者最初使用visibility: hidden;禁用像这样:

<div id="craft" style="visibility: hidden;" >CraftCraftCraftCraftCraftCraftCraft</div>

Working Example Fiddle