Javascript 页面加载后,按钮仅在第二次单击时起作用
我正在尝试创建按钮(即div),当单击时,这些按钮将显示其他div。例如,Button01显示Div01,Button02显示Div02。一次只能显示一个Div。我让这部分工作,但我遇到了一个问题,页面加载后,单击功能直到按钮div被单击一次才工作(这似乎没有任何作用)。在第一次单击之后,按钮divs all work fine。为什么会发生这种情况?我如何才能使单击功能立即工作 HTML JavascriptJavascript 页面加载后,按钮仅在第二次单击时起作用,javascript,css,html,Javascript,Css,Html,我正在尝试创建按钮(即div),当单击时,这些按钮将显示其他div。例如,Button01显示Div01,Button02显示Div02。一次只能显示一个Div。我让这部分工作,但我遇到了一个问题,页面加载后,单击功能直到按钮div被单击一次才工作(这似乎没有任何作用)。在第一次单击之后,按钮divs all work fine。为什么会发生这种情况?我如何才能使单击功能立即工作 HTML Javascript function showOne(){ if (document.getEl
function showOne(){
if (document.getElementById('Two').style.display != "none") {
document.getElementById('Two').style.display = "none";
};
if (document.getElementById('One').style.display == "none") {
document.getElementById('One').style.display = "block";
} else {
document.getElementById('One').style.display = "none";
};
};
function showTwo(){
if (document.getElementById('One').style.display != "none") {
document.getElementById('One').style.display = "none";
};
if (document.getElementById('Two').style.display == "none") {
document.getElementById('Two').style.display = "block";
} else {
document.getElementById('Two').style.display = "none";
};
};
演示:
正如您所看到的,使用“No wrap-in”,按钮只有在首先单击一次按钮后才能工作(这就是我实际页面上发生的情况)。值得注意的是,使用“onLoad”时,按钮根本不起作用。我做错了什么?这是因为
.style.display
仅提供当前直接在元素上设置的设置。它不会给出样式表的结果
若要修复此问题,请将与默认(样式表)值的比较设置为与”
的比较,而不是与“无”
,然后将其设置为”
而不是“无”
,以返回默认值
演示:
我还通过将元素保存到变量来减少代码。这样做更干净,更不容易出错
我也删除了一些不必要的分号
下面是您的代码的更枯燥的版本: 演示:
这是因为
样式
对象没有值。将代码更改为:
<div id="One" style="display: none;"></div>
<div id="Two" style="display: none;"></div>
或显示:块代码>你应该需要它吗
理想情况下,您应该避免内联onclick
事件处理程序,并使用JavaScript切换类,而不是滥用style对象,因为style对象无法扩展。
或者:
HTML
<div id="showOne" class="square button">Show One</div>
<div id="showTwo" class="square button">Show Two</div>
<div id="One" class="square hidden"></div>
<div id="Two" class="square hidden"></div>
JavaScript
window.onload = function(){
var hide = function( el ){ el.className += ' hidden'; },
show = function( el ){ el.className = el.className.replace( /\s*\bhidden\b/g, '' ); },
one = document.getElementById( 'One' ),
two = document.getElementById( 'Two' );
document.getElementById( 'showOne' )
.onclick = function(){ show( one ); hide( two ); };
document.getElementById( 'showTwo' )
.onclick = function(){ show( two ); hide( one ); };
};
谢谢工作完美:D
function swapShow(el1, el2) {
if (el1.style.display != "") {
el1.style.display = "";
}
if (el2.style.display == "") {
el2.style.display = "block";
} else {
el2.style.display = "";
}
}
function showOne(){
swapShow(document.getElementById('Two'),
document.getElementById('One'));
}
function showTwo(){
swapShow(document.getElementById('One'),
document.getElementById('Two'));
}
<div id="One" style="display: none;"></div>
<div id="Two" style="display: none;"></div>
window.onload = function(){
var hide = function( el ){ el.style.display = 'none'; },
show = function( el ){ el.style.display = 'block'; },
one = document.getElementById( 'One' ),
two = document.getElementById( 'Two' );
document.getElementById( 'showOne' )
.onclick = function(){ show( one ); hide( two ); };
document.getElementById( 'showTwo' )
.onclick = function(){ show( two ); hide( one ); };
};
<div id="showOne" class="square button">Show One</div>
<div id="showTwo" class="square button">Show Two</div>
<div id="One" class="square hidden"></div>
<div id="Two" class="square hidden"></div>
.button {
background-color:#ccc;
text-align:center;
}
.square {
width:70px;
height:81px;
float: left;
}
#One {
background-color:blue;
}
#Two {
background-color:red;
}
.hidden {
display:none;
}
window.onload = function(){
var hide = function( el ){ el.className += ' hidden'; },
show = function( el ){ el.className = el.className.replace( /\s*\bhidden\b/g, '' ); },
one = document.getElementById( 'One' ),
two = document.getElementById( 'Two' );
document.getElementById( 'showOne' )
.onclick = function(){ show( one ); hide( two ); };
document.getElementById( 'showTwo' )
.onclick = function(){ show( two ); hide( one ); };
};