Добавление вкладки начальной загрузки проблемы класса

Я пытаюсь добавить .active класс первого элемента li для каждой вкладки, но он работает только на одной вкладке, почему не работает должным образом? есть ли какое-либо свойство бутстрапа или я должен сделать сам? кстати я использую самозагрузки вкладкиДобавление вкладки начальной загрузки проблемы класса

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

источник

2017-02-02 ani_css

Вы имеете использовать 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>

источник

2017-02-02 14:59:03

Добавление вкладки начальной загрузки проблемы класса

ответ

Смежные вопросы