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按钮时,只会包含apear

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

Answer 1

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

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

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

编辑

再看一下,你不会使用一致的属性来隐藏你的<div>s:

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

所以要么调整你的JavaScript使用display如下:

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

或者最初通过使用visibility: hidden;如下禁用:

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

工作示例小提琴