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

我得到了我朋友的想法。实际上这不适用于bootstrap4。

所以我确实在脚本

中添加了这段代码

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

现在它正在运作..谢谢

Answer 2

标签导航需要Jquery起作用，并且需要包含在页面的头部。我使用jQuery 3.2.1 slim缩小版。如果将Jquery添加到标题中，并使用Aria遵循此代码模式，它将起作用。

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" 
      href="#nav-home" role="tab" aria-controls="nav-home" aria- 
      selected="true">Home</a>

    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" 
    href="#nav-profile" role="tab" aria-controls="nav-profile" aria- 
    selected="false">Profile</a>

    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" 
     href="#nav-contact" role="tab" aria-controls="nav-contact" aria- 
      selected="false">Contact</a>
 </div>
</nav>
 <div class="tab-content" id="nav-tabContent">
   <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria- 
    labelledby="nav-home-tab">...</div>
    <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria- 
     labelledby="nav-profile-tab">...</div>
    <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria- 
    labelledby="nav-contact-tab">...</div>
 </div>

激活不在bootstrap 4选项卡中工作

2 个答案: