Вкладки Twitter Bootstrap не работают: когда я нажимаю на них, ничего не происходит

81

Я пытаюсь реализовать вкладки Twitter Bootstrap в следующем коде, но, похоже, это не работает. Вкладки отображаются, но когда я нажимаю на них, ничего не происходит. Ниже приведен единственный код, который я использую. Все остальные скрипты CSS / JS скопированы из фреймворка Twitter Bootstrap.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Le styles -->
<link href="assets/twitterbootstrap/css/bootstrap.css" rel="stylesheet">
<link href="assets/twitterbootstrap/css/bootstrap-responsive.css" rel="stylesheet">

</head>

<body data-spy="scroll" data-target=".subnav" data-offset="50">

<div class="container">

<!-------->
<div id="content">
    <ul class="nav nav-tabs" data-tabs="tabs">
        <li class="active"><a href="#red">Red</a></li>
        <li><a href="#orange">Orange</a></li>
        <li><a href="#yellow">Yellow</a></li>
        <li><a href="#green">Green</a></li>
        <li><a href="#blue">Blue</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
        <div class="tab-pane active" id="red">
            <h1>Red</h1>
            <p>red red red red red red</p>
        </div>
        <div class="tab-pane" id="orange">
            <h1>Orange</h1>
            <p>orange orange orange orange orange</p>
        </div>
        <div class="tab-pane" id="yellow">
            <h1>Yellow</h1>
            <p>yellow yellow yellow yellow yellow</p>
        </div>
        <div class="tab-pane" id="green">
            <h1>Green</h1>
            <p>green green green green green</p>
        </div>
        <div class="tab-pane" id="blue">
            <h1>Blue</h1>
            <p>blue blue blue blue blue</p>
        </div>
    </div>
</div>

<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $(".tabs").tabs();
    });
</script>    
</div> <!-- container -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script>
<script type="text/javascript" src="assets/twitterbootstrap/js/bootstrap.js"></script>
</body>
</html>
html twitter-bootstrap ДЕРЕК Н.
источник
3
Добавление data-toggleсработало и у меня; это верно и для Bootstrap 3. Вот загрузочный образец с работающим примером: bootply.com/74927
ericsoco

Ответы:

87

Вам нужно добавить плагин вкладок в свой код

<script type="text/javascript" src="assets/twitterbootstrap/js/bootstrap-tab.js"></script>

Что ж, не сработало. Я сделал несколько тестов, и он начал работать, когда:

  1. перенесен (обновлен до 1.7) скрипт jQuery в <head>раздел
  2. добавлены data-toggle="tab"ссылки и идентификатор <ul>элемента вкладки
  3. изменен $(".tabs").tabs();на$("#tabs").tab();
  4. и еще кое-что, что не имеет значения

Вот код

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Le styles -->
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
</head>

<body>

<div class="container">

<!-------->
<div id="content">
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
        <li class="active"><a href="#red" data-toggle="tab">Red</a></li>
        <li><a href="#orange" data-toggle="tab">Orange</a></li>
        <li><a href="#yellow" data-toggle="tab">Yellow</a></li>
        <li><a href="#green" data-toggle="tab">Green</a></li>
        <li><a href="#blue" data-toggle="tab">Blue</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
        <div class="tab-pane active" id="red">
            <h1>Red</h1>
            <p>red red red red red red</p>
        </div>
        <div class="tab-pane" id="orange">
            <h1>Orange</h1>
            <p>orange orange orange orange orange</p>
        </div>
        <div class="tab-pane" id="yellow">
            <h1>Yellow</h1>
            <p>yellow yellow yellow yellow yellow</p>
        </div>
        <div class="tab-pane" id="green">
            <h1>Green</h1>
            <p>green green green green green</p>
        </div>
        <div class="tab-pane" id="blue">
            <h1>Blue</h1>
            <p>blue blue blue blue blue</p>
        </div>
    </div>
</div>


<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $('#tabs').tab();
    });
</script>    
</div> <!-- container -->


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

</body>
</html>
BartekR
источник
12
Спасибо Бартеку; однако я думаю, что сценарий bootstrap.js также содержит bootstrap-tab.js. Пожалуйста, поправьте меня, если я ошибаюсь. В любом случае, я добавил bootstrap-tab.js, но он по-прежнему не работает.
DEREK N
Вы правы, но это также зависит от кастомной сборки бутстрапа :) ... удалена другая часть комментария; не заметил, что вы создаете псевдоним пространства имен ...
BartekR 09
Пробовал и это; не работает. Подходит ли вам приведенный выше HTML-код?
DEREK N
4
Спасибо Барек, сработало! Обновление jQuery до 1.7 и переключение данных решили проблему. Вам даже не нужен тег скрипта.
DEREK N
Спасибо, это действительно помогло - мне не нужно было перемещать скрипт jquery, я просто выполнил остальные 3 шага
Роб
66

Ключевые элементы включают:

  1. class="nav nav-tabs"и data-tabs="tabs"изul
  2. data-toggle="tab"и href="#orange"изa
  3. class="tab-content"из divсодержания
  4. class="tab-pane"и idиз DIV пунктов

Полный код приведен ниже:

<ul class="nav nav-tabs" data-tabs="tabs">
    <li class="active"><a data-toggle="tab" href="#red">Red</a></li>
    <li><a data-toggle="tab" href="#orange">Orange</a></li>
    <li><a data-toggle="tab" href="#yellow">Yellow</a></li>
    <li><a data-toggle="tab" href="#green">Green</a></li>
    <li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="red">
        <h1>Red</h1>
        <p>red red red red red red</p>
    </div>
    <div class="tab-pane" id="orange">
        <h1>Orange</h1>
        <p>orange orange orange orange orange</p>
    </div>
    <div class="tab-pane" id="yellow">
        <h1>Yellow</h1>
        <p>yellow yellow yellow yellow yellow</p>
    </div>
    <div class="tab-pane" id="green">
        <h1>Green</h1>
        <p>green green green green green</p>
    </div>
    <div class="tab-pane" id="blue">
        <h1>Blue</h1>
        <p>blue blue blue blue blue</p>
    </div>
</div>
Джеки
источник
что, если я хочу вызвать функцию, когда вкладка становится активной, чтобы загрузить содержимое вкладки?
sureshvv
Отлично, этот совет мне помог. Спасибо!
NPC
Если вы используете это с AngularJS, укажите ul id = "myTabs", а затем добавьте: $ ('# myTabs a'). Click (function (e) {e.preventDefault (); $ (this) .tab ( 'Показать'); });
Робби Смит
В этом ответе мне нравится тот факт, что для инициализации вкладки не требуется javascript. Это мне помогло. Спасибо
Sincere
20

В последнее время возникла проблема с вкладками Bootstrap в соответствии с их онлайн-рекомендациями , но в настоящее время в их примере разметки есть ошибка: data-tabs="tabs"отсутствует в <ul>элементе. Без этого использование data-toggleссылок не работает.

IdaS
источник
16

Вам не хватает data-toggle="tab"тега данных в URL-адресах вашего меню, поэтому ваши скрипты не могут определить, где находятся переключатели вкладок:

HTML

<ul class="nav nav-tabs" data-tabs="tabs">
    <li class="active"><a data-toggle="tab" href="#red">Red</a></li>
    <li><a data-toggle="tab" href="#orange">Orange</a></li>
    <li><a data-toggle="tab" href="#yellow">Yellow</a></li>
    <li><a data-toggle="tab" href="#green">Green</a></li>
    <li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>
Андрес Ильич
источник
4

Я просто исправил эту проблему, добавив элемент data-toggle = "tab" в тег привязки

<div class="container">

<!-------->
  <div id="content">

   <ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#red">Red</a></li>
<li><a data-toggle="tab"  href="#orange">Orange</a></li>
<li><a data-toggle="tab" href="#yellow">Yellow</a></li>
<li><a data-toggle="tab" href="#green">Green</a></li>
<li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="red">
    <h1>Red</h1>
    <p>red red red red red red</p>
</div>
<div class="tab-pane" id="orange">
    <h1>Orange</h1>
    <p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
    <h1>Yellow</h1>
    <p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
    <h1>Green</h1>
    <p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
    <h1>Blue</h1>
    <p>blue blue blue blue blue</p>

и добавил следующее в раздел заголовка http://code.jquery.com/jquery-1.7.1.js '>

user1203530
источник
1

Я пробовал коды из документа начальной загрузки следующим образом:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>tab demo</title>
  <link rel="stylesheet" href="bootstrap.css">
</head>
<body>
<div class="span9">
    <div class="tabbable"> <!-- Only required for left/right tabs -->
      <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
        <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="tab1">
          <p>I'm in Section 1.</p>
        </div>
        <div class="tab-pane" id="tab2">
          <p>Howdy, I'm in Section 2.</p>
        </div>
      </div>
    </div>
</div> 
<script src="jquery.min.js"></script>
<script src="bootstrap.js"></script>
</body>
</html>

и это работает. Но когда я переключаю эти две <script src...>позиции, это не работает. Поэтому не забудьте загрузить скрипт jquery перед bootstrap.js.

user2595775
источник
0

Для меня проблема заключалась в том, что я не включал bootstrap.min.css (я включал только bootstrap-responseive.min.css).

Джон Онстотт
источник
0

Собственно, есть другой простой способ сделать это. У меня это работает, но я не уверен в вас, ребята. Ключевым моментом здесь является просто добавление FADE в каждую (панель вкладок), и это будет работать. Кроме того, вам даже не нужно запускать скрипт или любую другую версию jQuery. Вот мой код ... надеюсь, он сработает для всех вас.

<div class="tab-pane fade" id="Customer">
    <table class="table table-hover table-bordered">
        <tr>
            <th width="40%">Contact Person</th>
            <td><?php echo $event['Event']['e_contact_person']; ?></td>
        </tr>
    </table>
</div>
<div class="tab-pane fade" id="Delivery">
    <table class="table table-hover table-bordered">
        <tr>
            <th width="40%">Time Arrive Warehouse Start</th>
            <td><?php echo $event['Event']['e_time_arrive_WH_start']; ?></td>
        </tr>
    </table>
</div>
Джо Гик
источник
Я уже включил fadeкласс, но вкладки работали только в Google Chrome с asnc bootstrap.min.js-file. После добавления data-toggle="tab"вкладки работали также в Mozilla Firefox и MS Edge.
Гриша
0

Это решило проблему, хотя ни один из других примеров этого не сделал:

$('#myTab a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
});
Брок Хенсли
источник
0

У меня была такая же проблема, пока я не загрузил bootstrap-tab.js и не включил его в свой скрипт, загрузите отсюда https://code.google.com/p/fusionleaf/source/browse/webroot/fusionleaf/com/www/inc /bootstrap/js/bootstrap-tab.js?r=82aacd63ee1f7f9a15ead3574fe2c3f45b5c1027

включите bootsrap-tab.js чуть ниже jquery

<script type="text/javascript" src="bootstrap/js/bootstrap-tab.js"></script>

Окончательный код выглядел так:

 <!DOCTYPE html>
<html lang="en">
<head>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="libraries/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap-tab.js"></script>
</head>

<body>

<div class="container">

<!-------->
<div id="content">
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
        <li class="active"><a href="#red" data-toggle="tab">Red</a></li>
        <li><a href="#orange" data-toggle="tab">Orange</a></li>
        <li><a href="#yellow" data-toggle="tab">Yellow</a></li>
        <li><a href="#green" data-toggle="tab">Green</a></li>
        <li><a href="#blue" data-toggle="tab">Blue</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
        <div class="tab-pane active" id="red">
            <h1>Red</h1>
            <p>red red red red red red</p>
        </div>
        <div class="tab-pane" id="orange">
            <h1>Orange</h1>
            <p>orange orange orange orange orange</p>
        </div>
        <div class="tab-pane" id="yellow">
            <h1>Yellow</h1>
            <p>yellow yellow yellow yellow yellow</p>
        </div>
        <div class="tab-pane" id="green">
            <h1>Green</h1>
            <p>green green green green green</p>
        </div>
        <div class="tab-pane" id="blue">
            <h1>Blue</h1>
            <p>blue blue blue blue blue</p>
        </div>
    </div>
</div>


<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $('#tabs').tab();
    });
</script>    
</div> <!-- container -->


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

</body>
</html>

источник
Спасибо, это единственное, что у меня наконец сработало. Вопрос: почему этот файл не был включен в исходную загрузку начальной загрузки, если он так хорошо работает? Я просто хочу убедиться, что у меня есть доступ ко всему, что мне нужно для работы начальной загрузки в будущем.
user2223059 08
0

Так как я работаю с Bootstrap Javascript Modulesвместо загрузки всего Bootstrap Javascript, мои вкладки не работают , потому что я забыл загрузить load/include/в node_modules/bootstrap/js/tab.jsфайл.

введите описание изображения здесь

После включения заработало ...

Удачи

Аакаш
источник
-8

Просто скопируйте тег скрипта для добавления bootstrap.jsиз раздела заголовка в конец тела. Тогда все должно работать нормально даже без скриптов для активации вкладок.

Мохамед Хасил
источник