Щебетать вкладки бутстрапа и события javascript

Я использую twitter bootstrap для проекта - в частности его вкладки (http://twitter.github.com/bootstrap/javascript.html#tabs)

Теперь у меня есть этот список, и когда я нажимаю вкладку, он переключается на содержимое каждой отдельной вкладки. Однако этот контент предварительно загружается на страницу (HTML-код для содержимого всех вкладок уже существует, вы меняете видимость только нажатием вкладок).

Однако я хочу только динамически загружать контент, когда нажимается определенная вкладка, поэтому вы получите последние данные вместо данных, когда была загружена вся страница.

Я планирую использовать jQuery для этого. Однако как я могу это сделать, когда при нажатии вкладки вызывается определенная функция jquery?

Я попытался показать предупреждение, когда была нажата вкладка (если это работает, функция jQuery тоже), но даже это не работает:

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-tabs.js"></script>
<script type="text/javascript">
$(function() {
    $('.tabs').bind('click', function (e) {
        e.target(window.alert("hello"))
    });
});
</script>

И мой html:

<ul class="tabs" data-tabs="tabs">
  <li class="active"><a href="#tab1">tab 1</a></li>
  <li><a href="#tab2">tab 2</li>
</ul>

<div id="my-tab-content" class="tab-content">
  <div class="tab-pane" id="tab1">
      <h1>Tab1</h1>
      <p>orange orange orange orange orange</p>
  </div>
  <div class="tab-pane" id="tab2">
     <h1>Tab2</h1>
     <p>blue blue blue blue blue</p>
  </div>
</div>

Любая идея о том, как сделать эту работу?

см. это для работы вкладок twitter bootstrap: (http://twitter.github.com/bootstrap/javascript.html#tabs) и файл js, который он использует: http://twitter.github.com/bootstrap/1.4.0/bootstrap-tabs.js

Ответы

Ответ 1

Связывание, кажется, выполняется до того, как DOM готов. Кроме того, ваш селектор, кажется, сломан, и вы можете привязать изменение только к избранным элементам. Вы должны работать, нажимая и применяя некоторую логику. Попробуйте

$(function() {
    $('.tabs').bind('click', function (e) {
        e.target(window.alert("hello"))
    });
});

UPDATE

После консультаций с документацией кажется, что в вашем коде отсутствовала готовая часть DOM, остальное на самом деле не было ошибкой, а это означает, что в соответствии с документами должно работать следующее:

$(function() {
    $('.tabs').bind('change', function (e) {
        // e.target is the new active tab according to docs
        // so save the reference in case it needed later on
        window.activeTab = e.target;
        // display the alert
        alert("hello");
        // Load data etc
    });
});

Что вызвало путаницу в том, что плагин переопределяет селектор по умолчанию, делая #.tabs действительным, а также добавляя событие изменения к элементу табуляции. Подумайте, почему они решили, что этот синтаксис - отличная идея.

В любом случае вы можете попробовать второй образец и прокомментировать, что предупреждение запускается до или после изменения вкладки.

EDIT: исправлено исключение jquery, вызванное #.tabs селектором

Ответ 3

Если вы используете 2.3.2 и он не работает, попробуйте использовать:

$(document).on("shown", 'a[data-toggle="tab"]', function (e) {
     console.log('showing tab ' + e.target); // Active Tab
     console.log('showing tab ' + e.relatedTarget); // Previous Tab
});

2.3.2 использование табуляции: http://getbootstrap.com/2.3.2/javascript.html#tabs

Если вы играете с версией 3 (в настоящее время RC2), то документация показывает

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
     console.log('showing tab ' + e.target); // Active Tab
     console.log('showing tab ' + e.relatedTarget); // Previous Tab
 })

Вкладки RC2 Использование: http://getbootstrap.com/javascript/#tabs-usage

Ответ 4

Вы можете использовать следующий фрагмент кода в bootstrap 3

$(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
   var activatedTab = e.target; // activated tab
})

Ответ 5

Как использовать клик? Вот так:

$('#.tabs').click(function (e) {
  e.target(window.alert("hello"))
})

Ответ 6

У вас есть ошибка в синтаксисе, относящемся к селектору:

$('#.tabs') // should be ...
$('.tabs');

Неупорядоченный список имеет класс, называемый вкладками в вашем HTML, тогда как вы изначально пытались выбрать элемент с id.tabs '.

И вам также нужно будет принять предложение мантикори. Вы можете использовать 'change' для элементов формы.

$(document).ready(function() {
    $('.tabs').click(function(e) {
        e.preventDefault();
        alert('tab clicked!');
    });
});