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

引导并做出反应，在单选按钮上分配.active类

1 个答案: