Щелкать вкладку Bootstrap выбора Не меняя контент

Хотя есть много вопросов, связанных с Twitter Bootstrap, которые относятся к подобным проблемам с тем, что у меня есть, я не смог найти решения для моей конкретной проблемы. Я использую функцию вкладки twitter bootstraps для отображения содержимого, и, хотя сценарий успешно меняет изменение активной вкладки, содержимое остается неизменным.Щелкать вкладку Bootstrap выбора Не меняя контент

Вот код:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>Hello, Tabs!</title> 

     <link rel="stylesheet" href="public/css/bootstrap.min.css"> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
     <script type="text/javascript" src="public/js/bootstrap.min.js"></script> 
    </head> 
    <body> 


    <h3>Version Information:</h3> 
    <div class="tabbable tabs-left"> 
     <ul class="nav nav-tabs" data-tabs="tabs"> 
      <li class="active"> 
       <a href="#project/src/Graph/Graph.pm__0" data-toggle="tab">9424</a> 
      </li> 
      <li> 
       <a href="#project/src/Graph/Graph.pm__1" data-toggle="tab">9058</a> 
      </li> 
      <li> 
       <a href="#project/src/Graph/Graph.pm__2" data-toggle="tab">8928</a> 
      </li> 
      <li> 
       <a href="#project/src/Graph/Graph.pm__3" data-toggle="tab">8926</a> 
      </li> 
      <li> 
       <a href="#project/src/Graph/Graph.pm__4" data-toggle="tab">8924</a> 
      </li> 
      <li> 
       <a href="#project/src/Graph/Graph.pm__5" data-toggle="tab">8890</a> 
      </li> 
      <li> 
       <a href="#project/src/Graph/Graph.pm__6" data-toggle="tab">8889</a> 
      </li> 
      <li> 
       <a href="#project/src/Graph/Graph.pm__7" data-toggle="tab">8887</a> 
      </li> 
     </ul> 
     <div class="tab-content"> 
      <div class="tab-pane active" id="project/src/Graph/Graph.pm__0"> 
       <p> 
       Author: joe<br> 
       Version: v9424 (1:31 pm February 28, 2013)<br> 
       Action: Modified<br> 
       Message: Finalized a bit of the code... should be better now.<br> 
       </p> 
      </div> 
      <div class="tab-pane" id="project/src/Graph/Graph.pm__1"> 
       <p> 
       Author: joe<br> 
       Version: v9058 (9:13 pm February 26, 2013)<br> 
       Action: Modified<br> 
       Message: Hello, world!<br> 
       </p> 
      </div> 
      <div class="tab-pane" id="project/src/Graph/Graph.pm__2"> 
       <p> 
       Author: joe<br> 
       Version: v8928 (2:08 am February 25, 2013)<br> 
       Action: Modified<br> 
       Message: Hello, world!<br> 
       </p> 
      </div> 
      <div class="tab-pane" id="project/src/Graph/Graph.pm__3"> 
       <p> 
       Author: joe<br> 
       Version: v8926 (1:14 am February 25, 2013)<br> 
       Action: Modified<br> 
       Message: Hello, world!<br> 
       </p> 
      </div> 
      <div class="tab-pane" id="project/src/Graph/Graph.pm__4"> 
       <p> 
       Author: joe<br> 
       Version: v8924 (10:26 pm February 24, 2013)<br> 
       Action: Modified<br> 
       Message: Hello, world!<br> 
       </p> 
      </div> 
      <div class="tab-pane" id="project/src/Graph/Graph.pm__5"> 
       <p> 
       Author: joe<br> 
       Version: v8890 (9:59 pm February 23, 2013)<br> 
       Action: Modified<br> 
       Message: Hello, world!<br> 
       </p> 
      </div> 
      <div class="tab-pane" id="project/src/Graph/Graph.pm__6"> 
       <p> 
       Author: joe<br> 
       Version: v8889 (9:53 pm February 23, 2013)<br> 
       Action: Added<br> 
       Message: Hello, world!<br> 
       </p> 
      </div> 
      <div class="tab-pane" id="project/src/Graph/Graph.pm__7"> 
       <p> 
       Author: joe<br> 
       Version: v8887 (9:40 pm February 23, 2013)<br> 
       Action: Added<br> 
       Message: Hello, world!<br> 
       </p> 
      </div> 
     </div> 
    </div> 



    <script type="text/javascript"> 
    jQuery(document).ready(function ($) { 
     $('.nav-tabs').tab(); 
    }); 
    </script> 
    </body> 
</html>

Все зависимость файлы загружаются нормально, когда я запускаю это (для справки, версия начальной загрузки используется в 2.3.1). Я уже давно занимаюсь постановкой этой проблемы, поэтому любая помощь будет очень признательна.

EDIT: Here's ссылка jsfiddle, содержащая код ошибки.

источник

2013-03-07 churay

Вам необходимо переместить ссылку сценария Bootstrap выше ваше готовое событие. Таким образом, в нижней части вашей страницы должна выглядеть следующим образом:

<script src="public/js/bootstrap.min.js"></script> 
<script> 
jQuery(document).ready(function ($) { 
    $('.nav-tabs').tab(); 
}); 
</script>

Кроме того, поскольку вы указали тип документа HTML5, атрибут type является необязательным в script тега.

EDIT 2:

Я довольно уверен, что вы можете избавиться от привязки вкладки руководство - я не использую его на своем сайте, и это jsFiddle не делает это либо: http://jsfiddle.net/C3gQb/

Как вы можете видеть, вам просто нужно привязать события кликов ваших «вкладок», а затем он будет работать. Это должно работать:

<script src="public/js/bootstrap.min.js"></script> 
<script> 
$(function(){ 
    $('.nav-tabs a').on('click', function (e) { 
     e.preventDefault(); 
     $(this).tab('show'); 
    }); 
}); 
</script>

Если нет, то я подозреваю, что есть что-то необычное о среде браузера/DEV, что не очевидно, от того, что вы опубликовали.

EDIT 4

Да, мы изолировали проблему с вашим новым jsFiddle. Я отлажены верхний 2 для этой версии: http://jsfiddle.net/C3gQb/4/ - и те два в настоящее время работают:

$(function(){ 
 
    $('.nav-tabs a').on('click', function (e) { 
 
     e.preventDefault(); 
 
     $(this).tab('show'); 
 
    }); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> 
 

 
<h3>Version Information:</h3> 
 
<div class="tabbable tabs-left"> 
 
    <ul class="nav nav-tabs" data-tabs="tabs"> 
 
    <li class="active"> 
 
     <a href="#project-src-Graph-Graph-pm__0" data-toggle="tab">9424</a> 
 
    </li> 
 
    <li> 
 
     <a href="#project-src-Graph-Graph-pm__1" data-toggle="tab">9058</a> 
 
    </li> 
 
    <li> 
 
     <a href="#project/src/Graph/Graph.pm__2" data-toggle="tab">8928</a> 
 
    </li> 
 
    <li> 
 
     <a href="#project/src/Graph/Graph.pm__3" data-toggle="tab">8926</a> 
 
    </li> 
 
    <li> 
 
     <a href="#project/src/Graph/Graph.pm__4" data-toggle="tab">8924</a> 
 
    </li> 
 
    <li> 
 
     <a href="#project/src/Graph/Graph.pm__5" data-toggle="tab">8890</a> 
 
    </li> 
 
    <li> 
 
     <a href="#project/src/Graph/Graph.pm__6" data-toggle="tab">8889</a> 
 
    </li> 
 
    <li> 
 
     <a href="#project/src/Graph/Graph.pm__7" data-toggle="tab">8887</a> 
 
    </li> 
 
    </ul> 
 
    <div class="tab-content"> 
 
    <div class="tab-pane active" id="project-src-Graph-Graph-pm__0"> 
 
     <p> 
 
     Author: joe<br> 
 
     Version: v9424 (1:31 pm February 28, 2013)<br> 
 
     Action: Modified<br> 
 
     Message: Finalized a bit of the code... should be better now.<br> 
 
     </p> 
 
    </div> 
 
    <div class="tab-pane" id="project-src-Graph-Graph-pm__1"> 
 
     <p> 
 
     Author: joe<br> 
 
     Version: v9058 (9:13 pm February 26, 2013)<br> 
 
     Action: Modified<br> 
 
     Message: Hello, world!<br> 
 
     </p> 
 
    </div> 
 
    <div class="tab-pane" id="project/src/Graph/Graph.pm__2"> 
 
     <p> 
 
     Author: joe<br> 
 
     Version: v8928 (2:08 am February 25, 2013)<br> 
 
     Action: Modified<br> 
 
     Message: Hello, world!<br> 
 
     </p> 
 
    </div> 
 
    <div class="tab-pane" id="project/src/Graph/Graph.pm__3"> 
 
     <p> 
 
     Author: joe<br> 
 
     Version: v8926 (1:14 am February 25, 2013)<br> 
 
     Action: Modified<br> 
 
     Message: Hello, world!<br> 
 
     </p> 
 
    </div> 
 
    <div class="tab-pane" id="project/src/Graph/Graph.pm__4"> 
 
     <p> 
 
     Author: joe<br> 
 
     Version: v8924 (10:26 pm February 24, 2013)<br> 
 
     Action: Modified<br> 
 
     Message: Hello, world!<br> 
 
     </p> 
 
    </div> 
 
    <div class="tab-pane" id="project/src/Graph/Graph.pm__5"> 
 
     <p> 
 
     Author: joe<br> 
 
     Version: v8890 (9:59 pm February 23, 2013)<br> 
 
     Action: Modified<br> 
 
     Message: Hello, world!<br> 
 
     </p> 
 
    </div> 
 
    <div class="tab-pane" id="project/src/Graph/Graph.pm__6"> 
 
     <p> 
 
     Author: joe<br> 
 
     Version: v8889 (9:53 pm February 23, 2013)<br> 
 
     Action: Added<br> 
 
     Message: Hello, world!<br> 
 
     </p> 
 
    </div> 
 
    <div class="tab-pane" id="project/src/Graph/Graph.pm__7"> 
 
     <p> 
 
     Author: joe<br> 
 
     Version: v8887 (9:40 pm February 23, 2013)<br> 
 
     Action: Added<br> 
 
     Message: Hello, world!<br> 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div>

источник

2013-03-07 03:18:28

я пытался поставить ссылку сценария в ряде мест, но безрезультатно. Такое же поведение возникает, если я помещу include в указанное вами местоположение. – churay

@AverageJoe. Ссылка на скрипт наверняка должна быть выше готового события.У вас установлен Firebug? –

Да, я использовал Firebug, чтобы изолировать проблему. Из того, что я вижу, основная проблема заключается в том, что обновления происходят только при нажатии на вкладки, а не на панели содержимого. – churay

Я вижу, что вы ссылаетесь старую версию JQuery. Можете ли вы обновить его до 1.9.x? Я не думаю, что они работают со старой версией jQuery.

Кроме того, попробуйте следующее:

<script type="text/javascript" src="public/js/bootstrap.min.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.nav-tabs').tab(); 
}); 
</script>

А также, пожалуйста, переместите bootstrap.min.js перед функцией.

источник

2013-03-07 03:23:44

Я загрузил jquery v1.9.1, включил его в страницы, и поднял включение «bootstrap.min.js», но теперь поведение переключения вкладок даже не будет функционировать (т.е. теперь ни сами вкладки, ни контент не обновляются). Возможно, я собираюсь включить JQuery неправильно? Если я не буду загружать его локально, с каким URL я могу его захватить? Примечание. Я старался включить включение JQuery над включением бутстрапа (размещение JQuery над загрузкой), поэтому я не думаю, что это может быть проблемой. – churay

Отлично, что вы решили. В чем проблема? Скажите в строке? –

Проблема была не в бутстрапе, а скорее в идентификаторах, которые я использовал для HTML-тегов (я использовал слэши в идентификаторах, когда они не разрешены). – churay

Просто проверьте версию самозагрузки ... она должна быть V2.3.1 +

источник

2017-04-03 11:00:36

Щелкать вкладку Bootstrap выбора Не ​​меняя контент

ответ

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

Щелкать вкладку Bootstrap выбора Не меняя контент