javascript - 按钮需要点击 2 次才能换出 div

Question

单击按钮时，我有一个简单的 div 交换。但是，当页面第一次加载时，它需要用户在按钮上单击两次才能使该功能起作用。之后一切正常。请问有什么建议吗？

我的代码：

<script type="text/javascript">
    function SwapDivsWithClick(div1, div2) {
        d1 = document.getElementById(div1);
        d2 = document.getElementById(div2);
        if (d2.style.display == "none") {
            d1.style.display = "none";
            d2.style.display = "block";
        } else {
            d1.style.display = "block";
            d2.style.display = "none";
        }
    }

</script>




<style>
    #swapper-other {
        width: 200px;
        height: 50px;
        background-color: darkred;
        color: #fff;
        display: none;
    }

    #swapper-first {
        width: 200px;
        height: 50px;
        background-color: yellowgreen;
        color: #444;
    }

</style>

 <div id="swapper-first">
    <p>
        <a href="javascript:SwapDivsWithClick('swapper-first','swapper-other')">(Swap Divs)</a>
    </p>


    <p style="margin:0; color:red;">
        This div displayed when the web page first loaded.
    </p>
</div>
<div id="swapper-other">
    <a href="javascript:SwapDivsWithClick('swapper-first','swapper-other')">(Swap Divs)</a>
    <p>
        This div displayed when the link was clicked.
    </p>
</div>

标签： javascripttogglevisibility

Answer 1

问题是你的css显示值没有被JS捕获d2.style.display 而是尝试以下

function SwapDivsWithClick(div1, div2) {
    d1 = document.getElementById(div1);
    d2 = document.getElementById(div2);
    style = getComputedStyle(d2);
    if (style.display == "none") {
        d1.style.display = "none";
        d2.style.display = "block";
    } else {
        d1.style.display = "block";
        d2.style.display = "none";
    }
}

这将在调用时获得 css。