Вкладки Twitter Bootstrap не работают - PullRequest
Новая
       15

Вкладки Twitter Bootstrap не работают

0 голосов
/ 07 марта 2012

Мои вкладки просто не работают.Если я перемещаю активный класс в другую область на панелях вкладок, активный отображается при загрузке страницы, но при нажатии на вкладку ничего не происходит.Мой JavaScript работает, потому что меньше работает, поэтому я не знаю, в чем проблема. 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Your Income Expert</title>
    <link rel="stylesheet/less" type="text/css" href="less/style.less">
    <script src="js/less.js" type="text/javascript"></script>
    <script src="js/bootstrap-tab.js" type="text/javascript"></script>
</head>

<body>
    <div class="container">
      <div class="row">
        <div class="span3">
          <div class="well sidebar-nav">
            <ul class="nav nav-list">
                <li><h2>Your Logo Here</h2></li>
                 <li class="nav-header">Main</li>
                 <li class="active"><a href="#">Home</a></li>
                 <li><a href="#">Company</a></li>
                 <li><a href="#">Services</a></li>
                 <li><a href="#">Books</a></li>
                 <li><a href="#">Contact</a></li>
                 <li class="nav-header">Keep In Touch</li>
                 <li><a href="#">Facebook</a></li>
                 <li><a href="#">Twitter</a></li>
                 <li><a href="#">LinkedIn</a></li>
                 <li><a href="#">Blog</a></li>
            </ul>
          </div><!--/.well -->
        </div><!--/span-->
        <div class="span9">
            <div class="well">
                <div id="motivator">
                    <img src="broker.png" alt="" />
                </div>

                <h2 id="motivator-subtext">Main Heading</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu pretium dolor. Ut a vulputate turpis. Donec dignissim mollis scelerisque. Maecenas pharetra, massa a varius mollis, magna odio suscipit sapien, et posuere tellus tellus non arcu.</p>
                <p>Fusce a tincidunt purus. Pellentesque augue leo, varius pellentesque tempus sit amet, posuere at tortor. Aenean congue nibh sit amet quam tristique.</p>

                <h3>Heading</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla laoreet neque sit amet libero pulvinar vitae consequat ante adipiscing. Nam vehicula arcu in diam vehicula pretium.</p>

                <ul class="nav nav-tabs">
                  <li><a href="#home">Service 1</a></li>
                  <li><a href="#profile">Service 2</a></li>
                  <li><a href="#messages">Service 3</a></li>
                  <li><a href="#settings">Service 4</a></li>
                </ul>

                <div class="tab-content">
                  <div class="tab-pane active" id="home">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla laoreet neque sit amet libero pulvinar vitae consequat ante adipiscing. Nam vehicula arcu in diam vehicula pretium. Nulla volutpat tellus ut tellus consectetur blandit egestas est ullamcorper. Morbi adipiscing suscipit quam eget eleifend. Nam est turpis, blandit sed vehicula ut, aliquet quis turpis. Nulla et ligula in.</p>
                  </div>
                  <div class="tab-pane" id="profile">
                    <p>Testing the profile tab.</p>
                  </div>
                  <div class="tab-pane" id="messages">
                    <p>Testing the messages tab</p>
                  </div>
                  <div class="tab-pane" id="settings">
                    <p>Testing the settings tab.</p>
                  </div>
                </div>
                <script>
                  $(function () {
                    $('.tabs a:first').tab('show')
                  })
                </script>

                <h3>Heading</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu pretium dolor. Ut a vulputate turpis. Donec dignissim mollis scelerisque. Maecenas pharetra, massa a varius mollis, magna odio suscipit sapien, et posuere tellus tellus non arcu.</p>
            </div>
        </div>
    </div>
</body>
</html>

Ответы [ 2 ]

3 голосов
/ 07 марта 2012

Добавьте ко всем тегам a (которые должны быть табуляции) атрибут data-toggle со значением tab, например ::

<li><a data-toggle="tab" href="#home">Service 1</a></li>

Также см. этот пример ; 3-я вкладка выбирается путем установки класса active на li.

P.S .: Ваш javascript ($(function () { $('.tabs a:first').tab('show') })) не является обязательным.

=== ОБНОВЛЕНИЕ ===

Для вашего примера ссылки в вашей команде документ head должен выглядеть следующим образом: 

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Your Income Expert</title>
    <link type="text/css" rel="stylesheet/less" href="less/style.less">
    <link type="text/css" rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
    <script type="text/javascript" src="js/less.js"></script>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
    <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script>
</head>
0 голосов
/ 01 августа 2013

Пожалуйста, добавьте этот js-файл в тег head

// http://code.jquery.com/jquery-1.7.1.js'>

и теперь проверьте .. проблема решена

...