javascript - 页面加载后，按钮仅在第二次单击时有效

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/

如您所见，使用“No wrap - in”，按钮仅在先单击一次按钮后才起作用(这是我的实际页面上发生的情况)。值得注意的是，使用“onLoad”时，按钮根本不起作用。我做错了什么？

Answer 1

这是因为 .style.display 只为您提供当前直接在元素上设置的设置。它不会为您提供样式表的结果。

要修复它，将与默认(样式表)值的比较与 "" 而不是 "none" 进行比较，然后将其设置为 "" 而不是 "none" 以返回默认值。

演示: 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 = "";
    }
}

我还通过将元素保存到变量来减少代码。这样更干净，更不容易出错。

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

---

这是您的代码的更干版本:

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