html - 主动在 bootstrap 4 选项卡中不工作

Question

我正在使用来自 w3school 的 bootstrap 4 tabs/pills 代码。但我面临问题。就像当我点击任何事件链接时不改变它在第一个链接上是静态的

<ul class="nav nav-tabs control-btn">
                  <li class="active"><a data-toggle="tab" href="#quiz01" class="btn btn-info" role="button">01</a></li>
                  <li><a data-toggle="tab" href="#quiz02" class="btn btn-info" role="button">02</a></li>
                  <li><a data-toggle="tab" href="#quiz03" class="btn btn-info" role="button">03</a></li>
                  <li><a data-toggle="tab" href="#quiz04" class="btn btn-info" role="button">04</a></li>
                  <li><a data-toggle="tab" href="#quiz05" class="btn btn-info" role="button">05</a></li>
                  <li><a data-toggle="tab" href="#quiz06" class="btn btn-info" role="button">06</a></li>
                  <li><a data-toggle="tab" href="#quiz07" class="btn btn-info" role="button">07</a></li>
                  <li><a data-toggle="tab" href="#quiz08" class="btn btn-info" role="button">08</a></li>
                  <li><a data-toggle="tab" href="#quiz09" class="btn btn-info" role="button">09</a></li>
                  <li><a data-toggle="tab" href="#quiz10" class="btn btn-info" role="button">10</a></li>
</ul>

                  <div id="quiz01" class="tab-pane fade-in active">
                    <h3>Question 01.</h3>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry,
                      Lorem Ipsum is simply dummy text of the printing and typesetting industry?
                    </p>
                    <p><input type="radio" name="value01" value="01"> <b>1.</b>Option one</p>
                    <p><input type="radio" name="value01" value="02"> <b>2.</b>Option Two</p>
                    <p><input type="radio" name="value01" value="03"> <b>3.</b>Option Three</p>
                    <p><input type="radio" name="value01" value="04"> <b>4.</b>Option Four</p>
                    <!-- Modal footer -->
                    <div class="modal-footer">
                      <a class="btn btn-success btnNext">Save & Next</a>
                    </div>
                  </div>

Answer 1

我从我的 friend 那里得到了一个想法。实际上这不适用于 bootstrap4。

所以我确实在脚本中添加了这段代码

 $(".nav-tabs li a").click(function(){
      $(".nav-tabs li").removeClass("active");
      $(this).parent().addClass("active");
 });

现在它正在工作..谢谢