Bootstrap 3 вкладки не работают правильно

-2

um разработка веб-сайта, и это должно иметь несколько вкладок в соответствии с моей мечтой, , но дело в том, что когда я нажимаю вкладку, она показывает только содержимое, которое находится между тегами заголовка, а не тегами P, Вот мой code.please помочь мне исполнить мою мечту :-DBootstrap 3 вкладки не работают правильно

<div class="panel panel-default"> 
 
    <div class="panel-body tabs"> 
 
    <ul class="nav nav-pills" data-tabs="tabs"> 
 
     <li class="active"><a href="#tab1" data-toggle="tab1">Tab1</a> 
 
     </li> 
 
     <li><a href="#tab2" data-toggle="tab">Tab2</a> 
 
     </li> 
 
     <li><a href="#tab3" data-toggle="tab">Tab3</a> 
 
     </li> 
 
    </ul> 
 
    <div class="tab-content"> 
 
     <div class="tab-pane fade in active" id="tab1"> 
 
     <h4>Heading1</h4> 
 
     <p>text</p> 
 
     </div> 
 
     <div class="tab-pane fade" id="tab2"> 
 
     <h4>Heading2</h4> 
 
     <p>text</p> 
 
     </div> 
 
     <div class="tab-pane fade" id="tab3"> 
 
     <h4>Heading3</h4> 
 
     <p>text</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

источник

2016-05-03 is_sa91

Всегда добавляйте самозагрузки CSS, JS и JQuery ссылки в он когда вы работаете с Bootstrap. –

Я добавил эти вещи, но не получил результат, надеюсь, спасибо за вашу помощь :) –

Запустите мой ответ ниже. Разве это не работает? –

Я думаю, что вы пропали без вести ссылку JQuery. Код работает.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 

 
<div class="panel panel-default"> 
 
    <div class="panel-body tabs"> 
 
    <ul class="nav nav-pills" data-tabs="tabs"> 
 
     <li class="active"><a href="#tab1" data-toggle="tab">Tab1</a> 
 
     </li> 
 
     <li><a href="#tab2" data-toggle="tab">Tab2</a> 
 
     </li> 
 
     <li><a href="#tab3" data-toggle="tab">Tab3</a> 
 
     </li> 
 
    </ul> 
 
    <div class="tab-content"> 
 
     <div class="tab-pane fade in active" id="tab1"> 
 
     <h4>Heading1</h4> 
 
     <p>text in p</p> 
 
     </div> 
 
     <div class="tab-pane fade" id="tab2"> 
 
     <h4>Heading2</h4> 
 
     <p>text in p</p> 
 
     </div> 
 
     <div class="tab-pane fade" id="tab3"> 
 
     <h4>Heading3</h4> 
 
     <p>text in p</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Выход:

источник

2016-05-03 15:09:12

Нет, я добавил, что jquery link.but это не работает для меня в любом случае тег div работает внутри этой вкладки. спасибо вам за помощь. :) –

ОК .. но разве фрагмент над работой не работал? Запустите фрагмент кода. –

Да, ваш код работает отлично, idk неправильно в моих. –

Вам необходимо включить tabbable вкладки с помощью JavaScript

<script> 
    $('.nav-pills a').click(function (e) { 
     e.preventDefault() 
     $(this).tab('show') 
    }) 
</script>

источник

2016-05-03 15:33:00 Kld

nope.still not works.anyway Я вижу вкладки, а также заголовок, но внутри тега P. Спасибо за ваши усилия. :) –

Bootstrap 3 вкладки не работают правильно

ответ

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