我正在尝试创建一个动态网页，其中每个按钮都显示一个特定的 <div>页面同时隐藏 <div> 的其余部分页面。
我将它部署在此处、我的本地主机和 jsfiddle 上，但不知为何它无法在 jsfiddle 和我的本地主机上正常运行，但它可以在此处运行。
我不太清楚为什么会这样？
我的 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/
最佳答案
在 <body> 中将您的 Javascript 加载类型更改为 No wrap - ;
在这里试试:https://jsfiddle.net/yvw4gwwh/14/
关于javascript - 为什么我的 JavaScript 可以在这里运行，但不能在我的本地主机或 JSFiddle 中运行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49500584/