頁面加載後，按鈕只能當它被點擊了第二次

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