Twitter引導選項卡和javascript事件

Question

我正在為項目使用twitter bootstrap - 特別是它的tab功能（ http://twitter.github.com/bootstrap/javascript.html#tabs ）

現在我有了這個tablist，當我按下它時，它會切換到每個標簽的內容。 但是，此內容已預先加載到頁面中（所有選項卡的內容的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 /自舉-tabs.js

Answer 1

使用Twitter Bootstrap第2版，訂閱標簽更改事件的文檔化方法是

$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})

有關Twitter Bootstrap選項卡事件的最新文檔，請訪問http://getbootstrap.com/javascript/#tabs

Answer 2

如果您使用的是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

Answer 3

綁定似乎在DOM准備好之前運行。 此外，您的選擇器似乎已損壞，您只能對選定元素綁定更改。 您必須通過單擊並實現某些邏輯來解決此問題。 嘗試

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

UPDATE

在查閱了文檔之后，似乎您的代碼只缺少DOM就緒部分，其余部分實際上並不是一個bug，這意味着根據文檔，以下內容應該有效：

$(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有效並且還會向tab元素添加更改事件。 去了解為什么他們認為這種語法是個好主意。

無論如何，你可以嘗試第二個樣本，並在標簽更改之前或之后發出警告。

編輯：修復#.tabs選擇器引起的jquery異常

Answer 4

您可以在bootstrap 3中使用以下代碼段

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

Answer 5

使用點擊怎么樣？ 像這樣：

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

Answer 6

您的語法與選擇器有關的錯誤：

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

無序列表在HTML中具有名為“tabs”的類 ，而您最初嘗試選擇ID為 “.tabs”的元素。

你也必須考慮manticore的建議。 您只能在表單元素上使用“更改”。

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

Answer 7

文檔說：使用事件show 。