Question

非常新的HTML和JS结合Bootstrap。我使用Cyborg-theme，然后在HTML文件中使用Nav选项卡。我得到的问题是，每当我点击一个标签时，我希望该标签成为＆＃34;活跃的＆＃34;标签。但这并不起作用，相反，我设置为在HMTL中激活的唯一选项卡是一个保持活动的选项卡。

标签发生变化，以便显示正确的信息。只是这个小细节令我非常沮丧。有什么想法吗？

我的HTML：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

如果您使用的是bootstrap，则无需自定义js，它会自动将活动添加到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>

Answer 2

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

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

为：

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

与HTML代码一样，您有一个.nav类，而不是nav元素，因此永远不会从初始标签中删除活动类。

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

代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Bootstrap＆＃34; active＆＃34;标签不会在onClick上变为活动状态

2 个答案: