javascript - Bootstrap "active"选项卡不会在单击时变为事件状态

Question

对于结合了 Bootstrap 的 HTML 和 JS 非常陌生。我使用 Cyborg 主题，并在我的 HTML 文件中使用 Nav 选项卡。我遇到的问题是，每当我单击一个选项卡时，我都希望该选项卡成为“事件”选项卡。但这不起作用，相反，我在 HMTL 中设置为事件的唯一选项卡是保持事件状态的选项卡。

选项卡会更改，因此我可以显示正确的信息。正是这个小细节让我非常沮丧。有什么想法吗？

我的 HTML:

$(".nav li").on("click", function() {
    $("nav li").removeClass("active");
    $(this).addClass("active");
  });

<script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<ul class="nav nav-tabs">
              <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#about">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#toptracks">Top tracks</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#something">Something</a>
              </li>
            </ul>
            <div id="myTabContent" class="tab-content">
              <div class="tab-pane fade show active" id="about">
                <p>${artist.bio.content}</p>
              </div>
              <div class="tab-pane fade show active" id="toptracks">
                <ul>
                  ${this.tracks.map(track => `<li>${track['name']}</li>`).join('')}
                </ul>
              </div>
              <div class="tab-pane fade show active" id="something">
              <p>Something in here ...</p>
            </div>

Answer 1

如果您正在使用 bootstrap 则不需要自定义 js
，它会自动将 active 添加到 li

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
	<ul class="nav nav-tabs">
              <li class="nav-item active">
                <a class="nav-link active" data-toggle="tab" href="#about">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#toptracks">Top tracks</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#something">Something</a>
              </li>
            </ul>
            <div id="myTabContent" class="tab-content">
              <div class="tab-pane fade  active in " id="about">
                <p>ghgfhfg</p>
              </div>
              <div class="tab-pane fade" id="toptracks">
                <ul>
                  5555
                </ul>
              </div>
              <div class="tab-pane fade " id="something">
              <p>Something in here ...</p>
            </div>
     </div>  
     </div>