Question

我正在尝试为每个标签添加.active类第一个li项，但它只能使用一个标签，为什么不能正常工作？有什么属性的bootstrap或我必须自己做？顺便说一句，我正在使用引导标签

$(document).ready(function(){
    $(".add-active li:first").addClass("active");
});

body{
  margin:70px;
}

.tab-one,.tab-two{
  float:left;
  width:500px;
  margin:30px;
}

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>


<div class="tab-one">
    <!-- Nav tabs -->
  <ul class="nav nav-tabs add-active" role="tablist">
    <li role="presentation"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">
      <h2>First Tab</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis fugiat perspiciatis odio corrupti ab modi eius quaerat, fuga, autem asperiores excepturi hic facere soluta error iusto quibusdam reprehenderit sed nobis.</p>
    </div>
    <div role="tabpanel" class="tab-pane" id="profile">
      <h2>Second Tab</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus et ducimus blanditiis quis, modi mollitia minima, tenetur a expedita illum magnam alias rem, unde dicta necessitatibus sit ut delectus esse?</p>
    </div>
    <div role="tabpanel" class="tab-pane" id="messages">
      <h2>Third Tab</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam beatae incidunt magnam nesciunt corrupti architecto sequi dolorem molestias, adipisci cum earum in maxime velit quis animi ipsam unde odio aspernatur!</p>
    </div>
    <div role="tabpanel" class="tab-pane" id="settings">
      <h2>Fourth Tab</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem eveniet, consectetur, totam in quam ipsum iusto voluptates, sunt sequi, dolorum minus praesentium. Mollitia obcaecati, aliquid placeat dolorum, quibusdam ex molestiae.</p>
    </div>
  </div>

  </div>
  <!-- tab one-->
  
  <div class="tab-two">
    <!-- Nav tabs -->
  <ul class="nav nav-tabs add-active" role="tablist">
    <li role="presentation"><a href="#try" aria-controls="try" role="tab" data-toggle="tab">Try</a></li>
    <li role="presentation"><a href="#use" aria-controls="use" role="tab" data-toggle="tab">Use</a></li> 
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="try">
      <h2>Try Tab</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis fugiat perspiciatis odio corrupti ab modi eius quaerat, fuga, autem asperiores excepturi hic facere soluta error iusto quibusdam reprehenderit sed nobis.</p>
    </div>
    <div role="tabpanel" class="tab-pane" id="use">
      <h2>Use Tab</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus et ducimus blanditiis quis, modi mollitia minima, tenetur a expedita illum magnam alias rem, unde dicta necessitatibus sit ut delectus esse?</p>
    </div>
  
  </div>

  </div>
  
  <!-- tab two-->
  
  <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>
  
</body>
</html>

Answer 1

您必须使用find()，否则只会使用li:first的第一个实例：

$(document).ready(function(){
    $(".add-active").find('li:first').addClass("active");
});

希望这有帮助。

$(document).ready(function(){
  $(".add-active").find('li:first').addClass("active");
});

body{
  margin:70px;
}

.tab-one,.tab-two{
  float:left;
  width:500px;
  margin:30px;
}

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>


<div class="tab-one">
    <!-- Nav tabs -->
  <ul class="nav nav-tabs add-active" role="tablist">
    <li role="presentation"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">
      <h2>First Tab</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis fugiat perspiciatis odio corrupti ab modi eius quaerat, fuga, autem asperiores excepturi hic facere soluta error iusto quibusdam reprehenderit sed nobis.</p>
    </div>
    <div role="tabpanel" class="tab-pane" id="profile">
      <h2>Second Tab</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus et ducimus blanditiis quis, modi mollitia minima, tenetur a expedita illum magnam alias rem, unde dicta necessitatibus sit ut delectus esse?</p>
    </div>
    <div role="tabpanel" class="tab-pane" id="messages">
      <h2>Third Tab</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam beatae incidunt magnam nesciunt corrupti architecto sequi dolorem molestias, adipisci cum earum in maxime velit quis animi ipsam unde odio aspernatur!</p>
    </div>
    <div role="tabpanel" class="tab-pane" id="settings">
      <h2>Fourth Tab</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem eveniet, consectetur, totam in quam ipsum iusto voluptates, sunt sequi, dolorum minus praesentium. Mollitia obcaecati, aliquid placeat dolorum, quibusdam ex molestiae.</p>
    </div>
  </div>

  </div>
  <!-- tab one-->
  
  <div class="tab-two">
    <!-- Nav tabs -->
  <ul class="nav nav-tabs add-active" role="tablist">
    <li role="presentation"><a href="#try" aria-controls="try" role="tab" data-toggle="tab">Try</a></li>
    <li role="presentation"><a href="#use" aria-controls="use" role="tab" data-toggle="tab">Use</a></li> 
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="try">
      <h2>Try Tab</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis fugiat perspiciatis odio corrupti ab modi eius quaerat, fuga, autem asperiores excepturi hic facere soluta error iusto quibusdam reprehenderit sed nobis.</p>
    </div>
    <div role="tabpanel" class="tab-pane" id="use">
      <h2>Use Tab</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus et ducimus blanditiis quis, modi mollitia minima, tenetur a expedita illum magnam alias rem, unde dicta necessitatibus sit ut delectus esse?</p>
    </div>
  
  </div>

  </div>
  
  <!-- tab two-->
  
  <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>
  
</body>
</html>

添加活动类问题引导选项卡

1 个答案: