页面加载后，按钮只能当它被点击了第二次

Question

我试图创建按钮（这是指div），点击后，显示其他的div。例如，Button01显示Div01，Button02显示Div02。一次只能显示一个Div。我有这部分的工作，但我碰到的一个问题，即，在页面加载后，点击功能不直到按钮的div被点击一次（这似乎什么都不做）工作。在第一次点击之后，按钮div可以正常工作。为什么会发生这种情况，我怎样才能让点击功能马上工作？

HTML

<div id="showOne" class="button" onClick="showOne()">Show One</div> 
<div id="showTwo" class="button" onClick="showTwo()">Show Two</div> 
<div id="One"></div> 
<div id="Two"></div> 

CSS

.button { 
    width:70px; 
    height:81px; 
    background-color:#ccc; 
    float:left; 
    text-align:center; 
} 

#One { 
    width:70px; 
    height:81px; 
    background-color:blue; 
    float:left; 
    display:none; 
} 

#Two { 
    width:70px; 
    height:81px; 
    background-color:red; 
    float:left; 
    display:none; 
} 

的Javascript

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"; 
    }; 
}; 

演示： http://jsfiddle.net/7BtZn/1/

正如你所看到的使用“不循环 - 在”，一个按钮被点击一次后第一按钮才有效（这是发生了什么事我的实际页）。值得注意的是，使用“onLoad”，按钮根本不起作用。我究竟做错了什么？

Answer 1

这是因为.style.display只给你，如果它是目前直接设置元素的设置。它不会从你的样式表中给你一个结果。

为了修正它，使该比较为默认值（样式表）值的比较，以""而不是到"none"，然后将其设置到""代替"none"返回到默认值。

DEMO：http://jsfiddle.net/7BtZn/5/

function showOne(){ 
    var one = document.getElementById('One'); 
    var two = document.getElementById('Two'); 

    if (two.style.display != "") { 
     two.style.display = ""; 
    } 

    if (one.style.display == "") { 
     one.style.display = "block"; 
    } else { 
     one.style.display = ""; 
    } 
} 

function showTwo(){ 
    var one = document.getElementById('One'); 
    var two = document.getElementById('Two'); 

    if (one.style.display != "") { 
     one.style.display = ""; 
    } 

    if (two.style.display == "") { 
     two.style.display = "block"; 
    } else { 
     two.style.display = ""; 
    } 
} 

我还通过节省元件变量减小的代码。这种方式更清洁并且更少出错。

我删除了一堆不必要的分号了。

---

这里有一个更DRY版本的代码：

DEMO：http://jsfiddle.net/7BtZn/6/

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')); 
} 

Answer 2

这是因为style对象不具有价值。将您的代码更改为：

<div id="One" style="display: none;"></div> 
<div id="Two" style="display: none;"></div> 

或display: block;如果您需要，请改为。

理想情况下，你应该避免内联onclick事件处理程序和切换类使用JavaScript，而不是滥用的样式对象 - 这是没有办法的可伸缩性。

Answer 3

JSFIDDLE

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); }; 
}; 

或者：

JSFIDDLE

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> 

CSS

.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; 
} 

的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); }; 
};