引導和反應，在單選按鈕上分配 .active 類

Question

我有一排自定義單選按鈕，如果選中它們會改變大小。 默認情況下，第一個被選中，當我點擊另一個按鈕時，引導程序應該添加.active類，問題是該類沒有被添加，因為我刪除了 jquery 引導程序庫。 我怎樣才能在純 javascript 中做到這一點？ 我嘗試使用簡單的 CSS

 CSS .step { background-position: center; background-repeat: no-repeat; background-size: contain; color: #fff; cursor: pointer; font-size: 2.2rem; height: 55px; margin-top: 0.2rem; margin-bottom: 0.2rem; opacity: 0.8; overflow: hidden; position: relative; text-shadow: 2px 2px 0px #000; transition: 0.4s; width: 55px; z-index: 1; } .step.active { opacity: 1; position: relative; text-shadow: 2px 2px 0px #000, 0px 0px 10px #fff, 0px 0px 10px #fff; transform: scale(1.8); z-index: 99; } TRIED input[type="radio"]:checked+label{ opacity: 1; position: relative; text-shadow: 2px 2px 0px #000, 0px 0px 10px #fff, 0px 0px 10px #fff; transform: scale(1.8); z-index: 99; }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div className="row my-3 btn-group btn-group-toggle step-container mb-3" data-toggle="buttons"> <div className="col p-0 my-auto"> <label className="btn btn-radio mx-auto step active"> <input type="radio" name="step" id="step1" autocomplete="off">1 </label> </div> <div className="col p-0 my-auto"> <label className="btn btn-radio mx-auto step"> <input type="radio" name="step" id="step2" autocomplete="off">2 </label> </div> <div className="col p-0 my-auto"> <label className="btn btn-radio mx-auto step"> <input type="radio" name="step" id="step2" autocomplete="off">3 </label> </div> </div>

Answer 1

您可以為單選單擊添加一個功能，該功能將從已設置的活動元素中刪除活動類並將類添加到當前元素。 你可以參考下面的例子。

 function myFunction(e) { var arr = document.getElementsByName('radioa'); arr.forEach(function(a) { a.classList.remove("active");}); e.classList.add("active"); }

 .active{ opacity: 1; position: relative; text-shadow: 2px 2px 0px #000, 0px 0px 10px #fff, 0px 0px 10px #fff; transform: scale(1.8); z-index: 99; }

 <input type="radio" name="radioa" onclick="myFunction(this)"/> <input type="radio" name="radioa" onclick="myFunction(this)"/> <input type="radio" name="radioa" onclick="myFunction(this)"/>