Question

我正在尝试创建一个动态网页，其中每个按钮都会显示特定的<div>页面，同时隐藏剩余的<div>页面。

我在这里，在我的localhost和jsfiddle上部署它，但不知何故它在jsfiddle和我的localhost上运行不正确但它在这里工作。

我不太确定为什么会这样？

我的HTML：

<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

<button onclick="myFunction()">Try it</button>
<button onClick="myFunction2()">Try it</button>
<button onClick="myFunction3()">Try it</button>

<div id="myDIV">
This is my DIV element.
</div>

<div id="div2" style="display: none;">
Div2
</div>

<div id="div3" style="display: none;">Div3</div>

我的CSS：

#myDIV {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top: 20px;
}
#div2{
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: purple;
    margin-top: 20px;
}

#div3{
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: yellow;
    margin-top: 20px;
}

我的JavaScript：

function myFunction() {
    var x = document.getElementById("myDIV");
    var y = document.getElementById("div2");
    var z = document.getElementById("div3");
    if (x.style.display === "none") {
        x.style.display = "block";
    y.style.display = "none";
        z.style.display = "none";
    }
}

function myFunction2() {
    var x = document.getElementById("div2");
    var y = document.getElementById("myDIV");
    var z = document.getElementById("div3");
    if (x.style.display === "none") {
        x.style.display = "block";     
        y.style.display = "none";
        z.style.display = "none";
    }
}

function myFunction3() {
    var x = document.getElementById("div3");
    var y = document.getElementById("myDIV");
    var z = document.getElementById("div2");
    if (x.style.display === "none") {
        x.style.display = "block";     
        y.style.display = "none";
        z.style.display = "none";
    }
}

function myFunction() {
    var x = document.getElementById("myDIV");
    var y = document.getElementById("div2");
    var z = document.getElementById("div3");
    if (x.style.display === "none") {
        x.style.display = "block";
    y.style.display = "none";
        z.style.display = "none";
    }
}

function myFunction2() {
    var x = document.getElementById("div2");
    var y = document.getElementById("myDIV");
    var z = document.getElementById("div3");
    if (x.style.display === "none") {
        x.style.display = "block";     
        y.style.display = "none";
        z.style.display = "none";
    }
}

function myFunction3() {
    var x = document.getElementById("div3");
    var y = document.getElementById("myDIV");
    var z = document.getElementById("div2");
    if (x.style.display === "none") {
        x.style.display = "block";     
        y.style.display = "none";
        z.style.display = "none";
    }
}

#myDIV {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top: 20px;
}
#div2{
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: purple;
    margin-top: 20px;
}

#div3{
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: yellow;
    margin-top: 20px;
}

<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

<button onclick="myFunction()">Try it</button>
<button onClick="myFunction2()">Try it</button>
<button onClick="myFunction3()">Try it</button>

<div id="myDIV">
This is my DIV element.
</div>

<div id="div2" style="display: none;">
Div2
</div>

<div id="div3" style="display: none;">Div3</div>

编辑：

我的JSfiddle链接：https://jsfiddle.net/yvw4gwwh/3/

Answer 1

将您的Javascript加载类型更改为无包装 - <body>; 在这里试试：https://jsfiddle.net/yvw4gwwh/14/

为什么我的JavaScript可以在这里运行，但不能在我的localhost或JSFiddle中运行？

1 个答案: