Вкладки начальной загрузки Twitter и события javascript

Question

Вкладки начальной загрузки Twitter и события javascript

Я использую Twitter bootstrap для проекта - в частности, его функции tab (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

471 7

jQuery javascript twitter-bootstrap

7 ответов:

Comments

Ничего не найдено.

zatatatata · Accepted Answer · 2015-04-05 06:05:08

привязка, кажется, выполняется до того, как DOM готов. Кроме того, ваш селектор кажется сломанным, и вы можете привязать изменения только к выбранным элементам. Вы должны обойти, нажав и реализовав некоторую логику. Попробуй
$(function() {
    $('.tabs').bind('click', function (e) {
        e.target(window.alert("hello"))
    });
});
обновление

после консультации с документацией кажется, что в вашем коде отсутствовала только часть DOM ready, остальное на самом деле не было ошибкой, а это означает, что в соответствии с документами следующее должно работа:
$(function() {
    $('.tabs').bind('change', function (e) {
        // e.target is the new active tab according to docs
        // so save the reference in case it's needed later on
        window.activeTab = e.target;
        // display the alert
        alert("hello");
        // Load data etc
    });
});
что вызвало путаницу в том, что плагин переопределяет селектор по умолчанию, делая #.tabs допустимо, а также добавление события изменения в элемент вкладки. Пойдите, выясните, почему они решили, что этот синтаксис был отличной идеей.

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

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

Mike Grace · Accepted Answer · 2013-09-18 19:50:22

С Twitter Bootstrap версии 2 документированный способ подписаться на события изменения вкладки - это
$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})
последнюю документацию по событиям вкладки Bootstrap Twitter можно найти по адресу http://getbootstrap.com/javascript/#tabs

Sheldon Cohen · Accepted Answer · 2013-08-16 21:42:04

Если вы используете 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

Sadra Abedinzadeh · Accepted Answer · 2015-04-07 19:25:10

вы можете использовать следующий фрагмент кода в Bootstrap 3
$(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
   var activatedTab = e.target; // activated tab
})

Manticore · Accepted Answer · 2011-11-15 15:26:27

Как насчет использования click? Вот так:
$('#.tabs').click(function (e) {
  e.target(window.alert("hello"))
})

mrlee · Accepted Answer · 2011-11-15 15:47:18

у вас есть ошибка в синтаксисе, относящаяся к селектору:
$('#.tabs') // should be ...
$('.tabs');
неупорядоченный список класс называется "вкладки" в вашем HTML, в то время как вы изначально пытались выбрать элемент с id '.вешалки.'

и Вам также придется принять во внимание предложение Мантикоры. Вы можете использовать только "изменить" на элементах формы.
$(document).ready(function() {
    $('.tabs').click(function(e) {
        e.preventDefault();
        alert('tab clicked!');
    });
});

peroksid · Accepted Answer · 2012-10-29 02:09:55

документация говорит: используйте событие show.