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

Question

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

82

Я новичок в 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>

DEREK N 09 март 2012, в 06:06

Источник

3

Добавление data-toggle тоже работает для меня; это верно и для Bootstrap 3. Вот bootply с рабочим примером: bootply.com/74927
ericsoco 20 сен. 2013, в 00:54

Теги:

twitter-bootstrap

html

13 ответов

60

Ключевыми элементами являются:

class="nav nav-tabs" и data-tabs="tabs" of ul
data-toggle="tab" и href="#orange" a
class="tab-content" div содержимого
class="tab-pane" и id для dic элементов

Полный код выглядит следующим образом:

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

Jacky 25 дек. 2012, в 10:46

9

+1 для перечисления ключевых элементов.
Ty Bailey 09 июль 2013, в 18:07
0

Что делать, если я хочу вызвать функцию, когда вкладка становится активной для загрузки содержимого вкладки?
sureshvv 06 авг. 2013, в 08:56
0

THX, он не работает с <ol> только с тегом <ul>, который все
user956584 07 авг. 2014, в 12:49
0

Отлично, этот совет помог мне. Спасибо!
NPC 07 май 2015, в 23:52
0

Если вы используете это с AngularJS, присвойте ul id = "myTabs", а затем добавьте: $ ('# myTabs a'). Click (function (e) {e.preventDefault (); $ (this) .tab ( 'шоу'); });
Robbie Smith 31 дек. 2015, в 15:31
0

В этом ответе мне нравится тот факт, что для инициализации вкладки не требуется JavaScript. Это помогло мне. Спасибо
Sincere 08 апр. 2016, в 14:59

Показать ещё 4 комментария

19

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

IdaS 26 сен. 2012, в 11:55

17

У меня та же проблема, но выше некоторых ответов может быть сложно для меня.

Я нашел, что другой ответ может решить ваш вопрос Twitter Bootstrap Js (вкладки, всплывающие окна, выпадающий список), не работающий в Drupal

поместите jquery.js до bootstrap.tab.js

kewang 18 окт. 2012, в 04:01

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>

Andres Ilich 09 март 2012, в 11:49

3

Я просто исправил эту проблему, добавив элемент 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 18 апр. 2013, в 14:35

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 script перед загрузкой boot.png.js.

user2595775 19 июль 2013, в 09:04

0

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

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

Удача

Akash 25 фев. 2017, в 11:37

0

У меня была такая же проблема, пока я не загрузил bootstrap-tab.js и не включил ее в мой script, скачайте здесь 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>

Maina Wycliffe 13 дек. 2014, в 23:31

0

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

0

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

$('#myTab a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
});

Brock Hensley 04 янв. 2014, в 06:12

0

Собственно, есть еще один простой способ сделать это. Это работает для меня, но я не уверен, что вы, ребята. Главное здесь - просто добавить FADE в каждый (вкладку), и он будет работать. Кроме того, вам не нужна функция script или любая другая версия 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>

Joe Geek 25 авг. 2013, в 09:15

0

Я уже включил класс fade , но вкладки работали только в Google Chrome с asnc bootstrap.min.js . После добавления data-toggle="tab" вкладки работали также в Mozilla Firefox и MS Edge.
Grischa 11 апр. 2016, в 07:28

0

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

Jon Onstott 08 апр. 2013, в 06:53

-8

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

Mohamed Haseel 17 май 2012, в 13:56

Ещё вопросы

Добавление data-toggle тоже работает для меня; это верно и для Bootstrap 3. Вот bootply с рабочим примером: bootply.com/74927
+1 для перечисления ключевых элементов.
Что делать, если я хочу вызвать функцию, когда вкладка становится активной для загрузки содержимого вкладки?
THX, он не работает с <ol> только с тегом <ul>, который все
Отлично, этот совет помог мне. Спасибо!
Если вы используете это с AngularJS, присвойте ul id = "myTabs", а затем добавьте: $ ('# myTabs a'). Click (function (e) {e.preventDefault (); $ (this) .tab ( 'шоу'); });
В этом ответе мне нравится тот факт, что для инициализации вкладки не требуется JavaScript. Это помогло мне. Спасибо
Спасибо, это единственное, что наконец-то сработало для меня. Вопрос: почему этот файл не был включен в исходную загрузочную загрузку, если он работает так хорошо? Я просто хочу убедиться, что у меня есть доступ ко всему, что мне нужно, чтобы загрузчик работал в будущем.
Я уже включил класс fade , но вкладки работали только в Google Chrome с asnc bootstrap.min.js . После добавления data-toggle="tab" вкладки работали также в Mozilla Firefox и MS Edge.

BartekR · Accepted Answer · 2012-03-09T08-25-00.000Z

Вам нужно добавить плагин tabs к вашему коду

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

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

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

Здесь код

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

Спасибо Бартек; Тем не менее, я думаю, что скрипт bootstrap.js также содержит bootstrap-tab.js. Пожалуйста, поправьте меня, если я ошибаюсь. Во всяком случае, я добавил bootstrap-tab.js, и он все еще не работает.
Вы правы, но это также зависит от пользовательской сборки начальной загрузки :) ... удалена другая часть комментария; не заметил, что вы используете псевдоним пространства имен ...
Это тоже пробовал; не работает. Работает ли вышеуказанный HTML-код у вас?
Спасибо Барек, это сработало! Обновление jQuery до 1.7 и переключение данных решило проблему. Вам даже не нужен тег сценария.
jsfiddle: jsfiddle.net/NcJxh/embedded/result для потрясающего ответа
Спасибо, это действительно помогло - мне не нужно было перемещать jquery скрипт, я просто выполнил остальные 3 шага
Этот код должен быть в Документах Bootstrap вместо неполного, короткого фрагмента, который у них там есть ...
Я просто добавил все теги <script> в раздел <head>, спасибо, человек :)
В BS 3.3.6 это работало для меня без bootstrap-tab.js проверяющего школы W3 , надеюсь, помогает.