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>
