Bootstrap Registerkarte Inhalt ausblenden

Ich habe Bootstrap-Registerkarten, jede Registerkarte hat einen Inhalt. Ich möchte den Inhalt des "aktiven" Tabs ausblenden und nur anzeigen, nachdem ich auf den Tab geklickt habe. Wie verstecke ich zuerst den Inhalt und zeige ihn nach dem Klicken auf den Tab an.Bootstrap Registerkarte Inhalt ausblenden

Bitte um Rat. Vielen Dank im Voraus!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> 
 
</script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
 
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Enterprise Analytics</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
</head> 
 
<body> 
 
<!-- Nav tabs --> 
 
<ul class="nav nav-pills pill-marg" role="tablist"> 
 
<li role="presentation" class="active"><a class="" href="#orange" aria-controls="3"role="tab" data-toggle="tab">Active Tab Name</a></li> 
 
<li role="presentation"><a class="" href="#apple" aria-controls="tracking"role="tab" data-toggle="tab">Tab Name</a> 
 
</li> 
 
</ul> 
 
    <div class="tab-content"> 
 
    <div role="tabpanel" class="tab-pane active" id="orange"> 
 
      <div class="container"> 
 
       <div class="row">Some content</div> 
 
       </div> 
 
      </div> 
 
      
 
      <div role="tabpanel" class="tab-pane" id="apple"> 
 
      <div class="container"> 
 
      <div class="row">Some Content2</div> 
 
      </div> 
 
      </div> 
 
      
 
    </div>

Quelle

2017-06-15 jakonda

<!doctype html> 
<html> 
<head> 
<title></title> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<script> 
$(document).ready(function(){ 
    $(".active").click(function(){ 
     $(".active_content").show(); 
    }); 
}); 
</script> 

<style> 
.active_content{ 
display:none; 
} 
</style> 

</head> 
<body> 

<!-- Nav tabs --> 
<ul class="nav nav-pills pill-marg" role="tablist"> 
    <li role="presentation" class="active"><a class="" href="#orange" aria-controls="3"role="tab" data-toggle="tab">Active Tab Name</a></li> 
    <li role="presentation"><a class="" href="#apple" aria-controls="tracking"role="tab" data-toggle="tab">Tab Name</a> 
     </li> 
</ul> 
<div class="tab-content"> 
<div role="tabpanel" class="tab-pane active" id="orange"> 
     <div class="container"> 
      <div class="row active_content">Some content</div> 
      </div> 
     </div> 

     <div role="tabpanel" class="tab-pane" id="apple"> 
     <div class="container"> 
     <div class="row">Some Content2</div> 
     </div> 
     </div> 

</div> 

</body> 
</html>

Quelle

2017-06-15 16:07:28

Greta! Vielen Dank. Wie mache ich einen Klick zurück auf die Registerkarte "aktiv" und den Inhalt wieder ausblenden? – jakonda

unten aktualisierten Code Bitte gehen Sie durch. Dies wird Ihnen helfen, Ihr Problem zu beheben.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<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> 
 
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> 
 
    Link with href 
 
</a> 
 
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> 
 
    Button with data-target 
 
</button> 
 
<div class="collapse" id="collapseExample"> 
 
    <div class="well"> 
 
    ... 
 
    </div> 
 
</div>

s und es wird für Sie arbeiten.

Quelle

2017-06-15 15:28:20

Ich habe versucht, diese Lösungen, aber ich wollte zurück auf den Tab klicken und wird den Inhalt wieder ausblenden. Trotzdem danke! – jakonda

Bootstrap Registerkarte Inhalt ausblenden

Antwort

Verwandte Themen