DIV SPAN SWITCHING

Question

我在进行div切换方面遇到了问题。

<div id="swapper-first" style="display:block; border:2px dashed red; padding:25px;">
    <p style="margin:0; color:red;">
        This div displayed when the web page first loaded.
    </p>
</div>
<div id="swapper-other" style="display:none; border:2px dotted blue; padding:25px;">
    <p style="margin:0; color:blue;">
        This div displayed when the link was clicked.
    </p>
</div>


<label class="switch">
  <input type="checkbox" checked>
  <span class="slider round" href="javascript:SwapDivsWithClick('swapper-first','swapper-other')"></span>
</label>

Answer 1

更改您的代码，如下所示：

<label class="switch">
  <input type="checkbox" checked>
  <a class="slider round" onclick="SwapDivsWithClick()"></a>
</label>
<script type="text/javascript">
    function SwapDivsWithClick(){
        var first = document.getElementById("swapper-first");
        var second = document.getElementById("swapper-other");
        first.style.display = 'none';
        second.style.display = 'block';

    }
</script>