DIV 跨度切换答案

【问题标题】：DIV SPAN SWITCHINGDIV 跨度切换
【发布时间】：2017-08-13 20:21:59
【问题描述】：

我在进行 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>

【问题讨论】：

1. Spans 没有hrefs，使用onclick 或突兀 2. SwapDivsWithClick 在哪里 3. 为什么不onchange 的复选框并有标签？
<span href="..."> 行不通。
您的问题不清楚。描述细节。
您愿意告诉我们您的问题是什么吗？
您应该在复选框上使用onchange，而不是跨度的onclick。否则，单击复选框本身将切换复选框而不是您的 div，我认为这是您想要的。

标签： javascript php html css

【解决方案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>

【讨论】：