Javascript 分频开关

我在切换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>

此div在网页首次加载时显示。


单击链接时显示此div。

按如下方式更改代码：

<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>

函数SwapDivsWithClick（）{
var first=document.getElementById（“交换程序优先”）；
var second=document.getElementById（“交换程序其他”）；
first.style.display='none'；
second.style.display='block'；
}

1。跨距没有HREF，请使用onclick或obtrusively 2。SWAPDIVSWITH的位置单击3。为什么不更改复选框并添加标签？

不行。你的问题不清楚。描述详细信息。您愿意告诉我们您的问题是什么吗？您应该在复选框上使用

onchange

，而不是span的

onclick

。否则，单击复选框本身将切换复选框，而不是您的div，我假设这是您想要的。