第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

Bootstrap 切換開關(guān)在頁面加載時顯示錯誤的內(nèi)容

Bootstrap 切換開關(guān)在頁面加載時顯示錯誤的內(nèi)容

守著星空守著你 2021-08-26 14:34:58
我創(chuàng)建了一個引導(dǎo)程序切換開關(guān)，它應(yīng)該在兩個不同的內(nèi)容之間切換，它應(yīng)該通過開關(guān)的方向和黑色顯示當(dāng)前內(nèi)容。 問題：當(dāng)頁面加載或重新加載時顯示錯誤的內(nèi)容，并且開關(guān)在錯誤的一側(cè)，并且所選文本的顏色不是黑色（表示已選中）穆拉德對其進(jìn)行了改進(jìn)，但仍然存在一些問題：更新的小提琴：https : //jsfiddle.net/godsnake/bdqychLw/如何確保頁面以正確的順序和功能加載內(nèi)容和切換開關(guān)？請使用這個小提琴：https : //jsfiddle.net/godsnake/jmc798qx/4/
查看完整描述

2 回答

?
明月笑刀無情

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超4個贊

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

})

我更改了一些代碼并更改了變量名稱以提高可讀性。這是可行的，但我認(rèn)為這不是有效的代碼。


查看完整回答
反對 回復(fù) 2021-08-26
?
largeQ

TA貢獻(xiàn)2039條經(jīng)驗(yàn) 獲得超8個贊

在 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);

}


查看完整回答
反對 回復(fù) 2021-08-26
  • 2 回答
  • 0 關(guān)注
  • 220 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號