CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraptabs
ani_css
ani_css

Reputation: 2126

Adding active class issue bootstrap tab

I'm trying to add .active class first li item for every tab but it works only just one tab why isn't work properly ? is there any property of bootstrap or do I have to do myself ? by the way I'm using bootstrap tabs

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

Upvotes: 1

Views: 124

Answers (1)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

You've to use find() instead else it will take just the first instance of the li:first :

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

Hope this helps.

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

Upvotes: 1

Related Questions