引导“活动”选项卡在单击时不会变为活动状态

Question

HTML 和 JS 与 Bootstrap 的结合非常新。 我使用 Cyborg 主题，并在我的 HTML 文件中使用导航选项卡。 我遇到的问题是，每当我单击一个选项卡时，我都希望该选项卡成为“活动”选项卡。但这不起作用，相反，我在 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 ，它会自动将活动添加到lis

<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>   

Answer 2

只需在点击事件中替换您的代码：

$("nav li").removeClass("active");

到：

$(".nav li").removeClass("active");
___^__

在您的 HTML 代码中，您有一个 .nav 类而不是 nav 元素，因此活动类永远不会从初始选项卡中删除。

另外，将active 类添加到第一个li，而不是HTML 中的链接

代码：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs">
  <li class="nav-item active">
    <a class="nav-link" 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>