Вкладка JavaScript для BootStrap 2.0 не работает - PullRequest
2 голосов
/ 03 февраля 2012

Я пытаюсь получить новые CSS-файлы Bootstrap 2.0 и JavaScript-файлы и работать, и я не могу заставить работать скрипт вкладки. Это просто показывает, как будто ничего не происходит, и я не могу понять, что я сделал неправильно. Мой HTML выглядит следующим образом

<ul class="tabs">
    <li class="active"><a href="#parts" data-toggle="tab">Parts</a></li>
    <li><a href="#partCompare" data-toggle="tab">Part Compare</a></li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane active" id="parts" >
        <div class="page-header">
            <h1>
                Parts
                @using (Ajax.BeginForm("SearchPart", "Part", null, new AjaxOptions {     UpdateTargetId = "update_panel" }, new { @class = "pull-right" }))
                {
                    <input type="search" name="search" id="search" value />
                    <input type="submit" value="Search"/>
                }
            </h1>
        </div>
        <div class="container-fluid" id="main">
            <div class="row-fluid">
                <div id="navigation" class="span2">
                    <ul class="treeview"/>
                </div>
                <div id = "mainwindow" class="span10">
                    <div id="update_panel"/>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-pane" id="partCompare">This is the part Compare Tab!!!</div>
</div>
<script type="text/javascript">
    $(function() {
        $('.tabs').tab('show');
    });
</script>

Ответы [ 2 ]

3 голосов
/ 04 февраля 2012

Я думаю, что вам не хватает класса css (nav), и «вкладки» теперь должны называться «nav-tabs», одно из изменений после Bootstrap 1.4:

Tabs and pills now require the use of a new base class, .nav, on their <ul>

Они приводят этот пример:

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#">Home</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

-обновление-

В селекторе jQuery отсутствует часть 'a':

$(function () {
  $('.tabs a:last').tab('show')
})

Скорее всего, вы хотите изменить: последний в: первый активировать первую вкладку.

0 голосов
/ 06 февраля 2012

Какую версию jQuery вы используете?Вкладки в 2.0 используют .on (), добавленный в jQuery в версии 1.7.

У меня была та же проблема, jQuery 1.5.1 и вкладки работали нормально при начальной загрузке 1.4, но закрылись с 2.0.Обновление jQuery устранило мою проблему.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...