wake-up-neo.com

Bootstrap 4 - Standard-Tab-Bereich ist aktiv und funktioniert nicht

Bei der Suche nach dynamischen Nav-Registerkarten habe ich beschlossen, eine Einblendung hinzuzufügen, wenn der Benutzer auf die Registerkarte seiner Wahl klickt.

Wenn der modal zum ersten Mal geladen wird, bewirkt die folgende HTML-Zeile, dass die Registerkarte HOME durch den Fehler angezeigt wird.

<div id="home" class="tab-pane active">

Das oben funktioniert gut, aber ...

wenn ich den obigen Code durch den folgenden HTML-Code ersetze ...

<div id="home" class="tab-pane active fade in">

Wenn der modal zum ersten Mal geladen wird, wird div home nicht in eingeblendet. Es funktioniert nur, wenn der Benutzer auf eine andere Registerkarte klickt und dann wieder auf die Registerkarte HOME .

Meine Frage ist, ist dieses Verhalten normal?

<!-- 1. BOOTSTRAP v4.0.0         CSS !-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- 2. GOOGLE JQUERY JS v3.2.1  JS !-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 3. BOOTSTRAP v4.0.0         JS !-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-- Toggleable / Dynamic Tabs -->

<nav class="nav nav-tabs nav-justified">
<a class="nav-item nav-link active" data-toggle="tab" href="#home">Home</a>
<a class="nav-item nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
<a class="nav-item nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
<a class="nav-item nav-link disabled" data-toggle="tab" href="#menu3">Disabled</a>
</nav>

<div class="tab-content">
<div id="home" class="tab-pane active fade in">
<h3>HOME</h3>
<p>Some content in menu HOME.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Some content in menu 3.</p>
</div>
</div>

5
ASPiRE

USE fade show anstelle von fade in in den Klassen der Tab-Inhalte

Referenz https://getbootstrap.com/docs/4.0/components/navs/?#javascript-behavior

Dies ist die Lösung für Bootstrap 4. In Bootstrap 3 sollte Ihr Code jedoch funktionieren. 

Zugehörige Frage für Bootstrap 3. Registerkarte "Bootstrap" - aktive Klasse funktioniert nicht beim Laden von Seiten

<!-- 1. BOOTSTRAP v4.0.0         CSS !-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- 2. GOOGLE JQUERY JS v3.2.1  JS !-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 3. BOOTSTRAP v4.0.0         JS !-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-- Toggleable / Dynamic Tabs -->

<nav class="nav nav-tabs nav-justified">
  <a class="nav-item nav-link active" data-toggle="tab" href="#home">Home</a>
  <a class="nav-item nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
  <a class="nav-item nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
  <a class="nav-item nav-link disabled" data-toggle="tab" href="#menu3">Disabled</a>
</nav>

<div class="tab-content">
  <div id="home" class="tab-pane fade show active">
    <h3>HOME</h3>
    <p>Some content in menu HOME.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
  <div id="menu3" class="tab-pane fade">
    <h3>Menu 3</h3>
    <p>Some content in menu 3.</p>
  </div>
</div>

14

Sie müssen nur unten Elemente und Bootstrap-CSS hinzufügen.

<!-- 1. BOOTSTRAP v4.0.0         CSS !-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- 2. GOOGLE JQUERY JS v3.2.1  JS !-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 3. BOOTSTRAP v4.0.0         JS !-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"><p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p></div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"><p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p></div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab"><p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p></div>
</div>

1
subir biswas