warum Arent Tabs von Bootstrap

Question

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<ul class="nav nav-tabs"> 
 
    <li class="active"><a data-toggle="pill" href="#home">Images</a> 
 
    </li> 
 
    <li><a data-toggle="pill" href="#songs">Songs</a> 
 
    </li> 
 
    <li><a data-toggle="pill" href="#menu2">Video</a> 
 
    </li> 
 
</ul> 
 

 
<div class="tab-content"> 
 
    <div id="home" class="tab-pane fade in active"> 
 
    <div class="uploaded-image-ct"> 
 
     <button type="button" class="btn btn-default btn-sm"> 
 
     <span class="glyphicon glyphicon-picture"></span> Upload image 
 
     </button> 
 

 
    </div> 
 
    </div> 
 

 
    <div id="songs" class="tab-pane fade"> 
 
    <div class="form-group"> 
 
     <input id="song-link" placeholder="Paste Soundcloud link here" type="text"> 
 
    </div> 
 
    </div> 
 

 
    <div id="video" class="tab-pane fade"> 
 
    <div class="form-group"> 
 
     <input placeholder="Paste YouTube link here" type="text"> 
 
    </div> 
 

 
    </div> 
 

 
</div>

den Videobereich arbeiten, sollten youtube zeigen, die dort auf html, aber nicht auf der Seite.

ich überprüft, ob jquery vor bootstrap.js geladen wird .. Aber es funktioniert immer noch nicht. Es stellt sich heraus, dass die Tab-Taste nicht wie gewünscht funktioniert. wenn Sie jedoch auf den Bildknopf klicken, wird der Bildausschnitt angezeigt. Ist es das Problem nur mit Input-Tag?

Answer 1

Ihr Video Pille hat die folgenden:

<li><a data-toggle="pill" href="#menu2">Video</a> 

aber die ID der Registerkarte Sie versuchen, es zu verbinden, ist:

<div id="video" class="tab-pane fade"> 

müssen Sie die Pille auf die gleiche ID ändern

<li><a data-toggle="pill" href="#video">Video</a> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<ul class="nav nav-tabs"> 
 
    <li class="active"><a data-toggle="pill" href="#home">Images</a> 
 
    </li> 
 
    <li><a data-toggle="pill" href="#songs">Songs</a> 
 
    </li> 
 
    <li><a data-toggle="pill" href="#video">Video</a> 
 
    </li> 
 
</ul> 
 

 
<div class="tab-content"> 
 
    <div id="home" class="tab-pane fade in active"> 
 
    <div class="uploaded-image-ct"> 
 
     <button type="button" class="btn btn-default btn-sm"> 
 
     <span class="glyphicon glyphicon-picture"></span> Upload image 
 
     </button> 
 

 
    </div> 
 
    </div> 
 

 
    <div id="songs" class="tab-pane fade"> 
 
    <div class="form-group"> 
 
     <input id="song-link" placeholder="Paste Soundcloud link here" type="text"> 
 
    </div> 
 
    </div> 
 

 
    <div id="video" class="tab-pane fade"> 
 
    <div class="form-group"> 
 
     <input placeholder="Paste YouTube link here" type="text"> 
 
    </div> 
 

 
    </div> 
 

 
</div>

Answer 2

Arbeits Snippet:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<ul class="nav nav-tabs"> 
 
    <li class="active"><a data-toggle="pill" href="#home">Images</a> 
 
    </li> 
 
    <li><a data-toggle="pill" href="#songs">Songs</a> 
 
    </li> 
 
    <li><a data-toggle="pill" href="#video">Video</a> 
 
    </li> 
 
</ul> 
 

 
<div class="tab-content"> 
 
    <div id="home" class="tab-pane fade in active"> 
 
    <div class="uploaded-image-ct"> 
 
     <button type="button" class="btn btn-default btn-sm"> 
 
     <span class="glyphicon glyphicon-picture"></span> Upload image 
 
     </button> 
 

 
    </div> 
 
    </div> 
 

 
    <div id="songs" class="tab-pane fade"> 
 
    <div class="form-group"> 
 
     <input id="song-link" placeholder="Paste Soundcloud link here" type="text"> 
 
    </div> 
 
    </div> 
 

 
    <div id="video" class="tab-pane fade"> 
 
    <div class="form-group"> 
 
     <input placeholder="Paste YouTube link here" type="text"> 
 
    </div> 
 

 
    </div> 
 

 
</div>

jQuery muss die richtige href im Anker-Tag, die Sie in der Registerkarte, die auf die richtige tab-pane verweist.

Sie wurden mit:

<ul class="nav nav-tabs"> 
    <li class="active"><a data-toggle="pill" href="#home">Images</a> 
    </li> 
    <li><a data-toggle="pill" href="#songs">Songs</a> 
    </li> 
    <li><a data-toggle="pill" href="#menu2">Video</a> 
    </li> 
</ul> 

Sie müssen die href des Video Punkt #video wie so haben:

<ul class="nav nav-tabs"> 
    <li class="active"><a data-toggle="pill" href="#home">Images</a> 
    </li> 
    <li><a data-toggle="pill" href="#songs">Songs</a> 
    </li> 
    <li><a data-toggle="pill" href="#video">Video</a> 
    </li> 
</ul>