Question

我正在尝试创建按钮（即div），单击时会显示其他div。例如，Button01显示Div01，Button02显示Div02。一次只能显示一个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" }返回默认值。

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

我还通过将元素保存到变量来减少代码。这种方式更清洁，更不易出错。

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

这是您的代码更加干燥的版本：

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

页面加载后，按钮仅在第二次单击时才起作用

3 个答案: