1
Ich versuche, .active Klasse erste li Element für jede Registerkarte hinzufügen, aber es funktioniert nur eine Registerkarte, warum nicht ordnungsgemäß funktioniert? Gibt es irgendwelche Eigenschaften von Bootstrap oder muss ich selbst tun? durch die Art und Weise bin ich mit Bootstrap-TabsHinzufügen von Bootstrap-Registerkarten für aktive Klassen
$(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>