почему Арент язычки бутстрапе работает

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

раздел видео должно показать YouTube, который есть на HTML, но не на этой странице.

Я проверил, загружен ли jquery впереди bootstrap.js .. Но все же он не работает. Оказывается, кнопка табуляции не работает так, как должна. хотя, когда вы нажмете на кнопку изображения кнопки изображения, будет показано. Это проблема только с тегом ввода?

источник

2016-06-25 Saugat Thapa

Мы не будем знать, если вы не размещать код, а не только образ. –

Пожалуйста, разместите ** минимальный рабочий пример ** вашего кода (HTML/CSS/JS) в [Snippet] (https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and -html-кодовые фрагменты /). См. [Mcve] и [ask]. – vanburen

Рассмотрите отправку [фрагмента кода] (http://i.imgur.com/YrYSIlG.png) (есть виджет фрагмента на StackOverflow) –

Ваше видео таблетка имеет следующий:

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

но идентификатор вкладки вы пытаетесь связать его является:

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

вам нужно изменить пилюлю одному и тому же идентификатору

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

источник

2016-06-25 05:09:50 gavgrif

Рабочая Отрывок:

<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 нуждается в якорный тег, который у вас есть на вкладке, что указывает на правильный tab-pane правильный href.

Вы использовали:

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

Вы должны иметь href от Video точки к #video так:

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

источник

2016-06-25 05:10:06

ха-ха @ Джереми Иглехарт - я уже опубликовал это - его расы !! :)) – gavgrif

haha :) Мы набрали его в то же время без сомнения :) –

почему Арент язычки бутстрапе работает

ответ

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