Вкладка начальной загрузки 2.0 с data-toggle = "tab" не отображается на панели навигации - PullRequest
Новая
       19

Вкладка начальной загрузки 2.0 с data-toggle = "tab" не отображается на панели навигации

1 голос
/ 02 апреля 2012

хорошо, я использую версию Jquery (edge) и загрузчик 2.0, и у меня есть этот код: 

    <div id="leftcol">
    <div id="ppl" class="tabbable tabs-left">
        <ul id="tabppl">
        <li class="active"><a class="bl" href="#1" data-target="#1" data-toggle="tab"> 1<span class="arroright"> </span></a> </li>
        <li><a class="bl" href="#2" data-target="#2" data-toggle="tab"> 2<span class="arroright"> </span></a> </li>
        <li><a class="bl" href="#3" data-target="#3" data-toggle="tab"> 3 <span class="arroright"> </span></a> </li>
        <li><a class="bl" href="#4" data-target="#4" data-toggle="tab">  4<span class="arroright"> </span></a>  </li>
        <li><a class="bl" href="#5" data-target="#5" data-toggle="tab"> 5<span class="arroright"> </span></a></li>
        <li><a class="bl" href="#6" data-target="#6" data-toggle="tab"> 6<span class="arroright"> </span></a>  </li>
        <li><a class="bl" href="#7" data-target="#7" data-toggle="tab"> 7 <span class="arroright"> </span></a></li>
        <li><a class="bl" href="#8" data-target="#8" data-toggle="tab"> 8<span class="arroright"> </span></a>  </li>
        <li><a class="bl" href="#9" data-target="#9" data-toggle="tab">9 <span class="arroright"> </span></a> </li>
        </ul>
    </div><!-- ppl-->
</div><!--leftcol-->

Я знаю теорию, и простой код, подобный этому, работает, только если я помещаю "данные-toggle = "tab" "в каждом теге -a-, но #Direction не отображается на панели навигации, он только меняет содержимое, URL http://twitter.github.com/bootstrap/javascript.html#tabs не объясняет это, похоже на nav, но свкладки.Мне нужно, чтобы вся эта информация появилась на панели навигации.Нравится http://Your -url.com / # yourtabclicked

Ответы [ 2 ]

1 голос
/ 30 апреля 2012

Для вкладок по умолчанию установлено значение e.preventDefault. 

  $(function () {
    $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
      e.preventDefault()
      $(this).tab('show')
    })
  })

Вы можете попытаться отключить настройки по умолчанию: 

$('body').off('click.tab.data-api');

например. 

  $(function () {

    $('body').off('click.tab.data-api');

    $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
         //notice the e.preventDefault() is missing now
         $(this).tab('show');
    })
  })

Не тестировал, но должно работать.

1 голос
/ 04 апреля 2012

Я нашел что-то, что работает.Это заставляет все URL работать с указателем #ID.просто добавив это: 

$(function () {
  var activeTab = $('[href=' + location.hash + ']');
  activeTab && activeTab.tab('show');
});

И этот другой код для отображения вашей вкладки открывается на панели навигации при нажатии на нее: 

$('.nav a').on('shown', function (e) {
  window.location.hash = e.target.hash;
})

большая часть кода была найдена в разных частяхэтот веб-сайт.

ПРИМЕЧАНИЕ: вам нужен последний JQuery (с работами 1.7.1).

...