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

  <div class="toggler pointer" id="filt-monthly">Monthly </div>

    <label class="toggle">

       <input type="checkbox" id="switcher" class="check"/>

       <b class="b switch"></b>

    </label>

  <div class="toggler pointer" id="filt-annual"> Annual</div>

</div>

CSS

.toggler {

  display: inline-block;

  vertical-align: middle;

  margin: 12px 0 0 0;

  color: #ddd;

  transition: .2s;

  font-weight: bold;

}

.toggler--is-active {

  color: #000000;

}

.b {

  display: block;

}

.hide{

  display: none;

}

/* slide/switch */

.toggle {

  position: relative;

  display: inline-block;

  width: 60px;

  height: 34px;

}

.toggle input { 

  opacity: 0;

  width: 0;

  height: 0;

}

.switch {

  position: absolute;

  top: 0; right: 0; bottom: 0; left: 0;

  cursor: pointer;

  background-color: #999;

  -webkit-transition: .4s;

  transition: .4s;

  border-radius: 34px;

}

.switch:before {

  position: absolute;

  bottom: 4px; left: 4px;

  content: "";

  width: 26px;

  height: 26px;

  background-color: #fff;

  -webkit-transition: .4s;

  transition: .4s;

  border-radius: 50%;

}

input:checked + .switch {

  background-color: #f66;

}

input:focus + .switch {

  box-shadow: 0 0 1px #f66;

}

input:checked + .switch:before {

  -webkit-transform: translateX(26px);

  -ms-transform: translateX(26px);

  transform: translateX(26px);

}