Bootstrap 切换开关在页面加载时显示错误的内容

Question

我创建了一个引导程序切换开关，它应该在两个不同的内容之间切换，它应该通过开关的方向和黑色显示当前内容。 问题：当页面加载或重新加载时显示错误的内容，并且开关在错误的一侧，并且所选文本的颜色不是黑色（表示已选中）

穆拉德对其进行了改进，但仍然存在一些问题：

更新的小提琴：https : //jsfiddle.net/godsnake/bdqychLw/

如何确保页面以正确的顺序和功能加载内容和切换开关？

请使用这个小提琴：https : //jsfiddle.net/godsnake/jmc798qx/4/

Answer 1

var month = document.getElementById("filt-monthly"),    annual = document.getElementById("filt-annual"),    swicther = document.getElementById("switcher"),    montWrapper = document.getElementById("monthly"),    annualWrapper = document.getElementById("annually");month.addEventListener("click", function(){  month.classList.add("toggler--is-active");  annual.classList.remove("toggler--is-active");  montWrapper.classList.remove("hide");  annualWrapper.classList.add("hide");  document.querySelector("[type='checkbox']").checked = false}); annual.addEventListener("click", function(){  month.classList.remove("toggler--is-active");  annual.classList.add("toggler--is-active");  montWrapper.classList.add("hide");  annualWrapper.classList.remove("hide");  document.querySelector("[type='checkbox']").checked = true}); swicther.addEventListener("click", function(event){  month.classList.toggle("toggler--is-active");  annual.classList.toggle("toggler--is-active");  montWrapper.classList.toggle("hide");  annualWrapper.classList.toggle("hide");})我更改了一些代码并更改了变量名称以提高可读性。这是可行的，但我认为这不是有效的代码。

Answer 2

在 html 和 css 中更改了切换、检查和切换。随意使用这个。HTML<div style="" class="container pb-2" id="signupForm">&nbsp; <div class="toggler pointer" id="filt-monthly">Monthly </div>&nbsp; &nbsp; <label class="toggle">&nbsp; &nbsp; &nbsp; &nbsp;<input type="checkbox" id="switcher" class="check"/>&nbsp; &nbsp; &nbsp; &nbsp;<b class="b switch"></b>&nbsp; &nbsp; </label>&nbsp; <div class="toggler pointer" id="filt-annual"> Annual</div></div>CSS.toggler {&nbsp; display: inline-block;&nbsp; vertical-align: middle;&nbsp; margin: 12px 0 0 0;&nbsp; color: #ddd;&nbsp; transition: .2s;&nbsp; font-weight: bold;}.toggler--is-active {&nbsp; color: #000000;}.b {&nbsp; display: block;}.hide{&nbsp; display: none;}/* slide/switch */.toggle {&nbsp; position: relative;&nbsp; display: inline-block;&nbsp; width: 60px;&nbsp; height: 34px;}.toggle input {&nbsp;&nbsp; opacity: 0;&nbsp; width: 0;&nbsp; height: 0;}.switch {&nbsp; position: absolute;&nbsp; top: 0; right: 0; bottom: 0; left: 0;&nbsp; cursor: pointer;&nbsp; background-color: #999;&nbsp; -webkit-transition: .4s;&nbsp; transition: .4s;&nbsp; border-radius: 34px;}.switch:before {&nbsp; position: absolute;&nbsp; bottom: 4px; left: 4px;&nbsp; content: "";&nbsp; width: 26px;&nbsp; height: 26px;&nbsp; background-color: #fff;&nbsp; -webkit-transition: .4s;&nbsp; transition: .4s;&nbsp; border-radius: 50%;}input:checked + .switch {&nbsp; background-color: #f66;}input:focus + .switch {&nbsp; box-shadow: 0 0 1px #f66;}input:checked + .switch:before {&nbsp; -webkit-transform: translateX(26px);&nbsp; -ms-transform: translateX(26px);&nbsp; transform: translateX(26px);}