Twitter Bootstrap - 在選項卡上執行操作「顯示」事件

我需要根據引導程序jQuery選項卡部分中的選定選項卡「重置」某些頁面信息。Twitter Bootstrap - 在選項卡上執行操作「顯示」事件

該文檔顯示此事件，而這正是我需要的：http://twitter.github.com/bootstrap/javascript.html#tabs

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

我需要得到e.Target和e.relatedTarget的「HREF」屬性，它唯一標識的2片與2片 - 它們鏈接到的內容窗格。

這是我的問題：e對象是我不期待或習慣的某個對象。我無法使用任何jQuery方法，例如e.target.attr('href') - 我以前用的所有正常的jquery方法都不見了。我嘗試訪問它像一個原始對象屬性 - e.href，並得到https://127.0.0.1/test?action=view#tab-a"而不是#tab-a

我可以用這個代碼解決方法 - 但我明顯做錯了什麼。應該有一個簡單的方法可以從e.target直接獲得#tab-a - 但我無法弄清楚。

來源

2012-10-31 Jonathan Vanasco

注意，在引導3，我們需要使用shown.bs.tab代替 –

自舉3，這應該是'上（ 'shown.bs.tab''而不是'on（'shown''。 – kalu

既然'e.target'給你這個'https：//127.0.0.1/test？action = view＃tab-a'你如何管理它工作？因爲這仍然沒有工作，例如。 '$（「https://127.0.0.1/test?action=view#tab-a」）'將返回'undefined'或'Syntax error，unrecognized expression ...'??? – Jaider

改爲嘗試$(e.target).attr('href')。

來源

2012-10-31 18:34:26 Sara

非常感謝。這是確切的答案。 –

太糟糕了我只能投票一次，thnx –

如果有人需要知道當前選中哪個選項卡索引，而無需在DOM中手動計數。

使用案例：當#hrefs動態更新時，您可以在選項卡索引上進行中繼。

jQuery功能.index()返回整數，指示jQuery對象中第一個元素相對於其同級元素的位置。

var el = jQuery('#some .thing'); // some DOM node that contains tab html structure 
var tab_list = el.find('.tabbable').first().find('a[data-toggle="tab"]'); 
// event namespace ".bs.tab" is important in some versions of Bootstrap 
tab_list.on('shown.bs.tab', function(e){ 

    // zero based index 
    // jQuery function `.index()` returns zero-based DOM "order" index 
    tab_index = $(e.target).parent().index(); 

    // store this index to cookie or somwhere 
    // so that you can show that tab again when user comes back to page 
    // or makes a page refresh (F5) 
});

來源

2014-02-03 11:41:52 hrvoj3e

下旬到這裏的聚會是我的看法：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 

    e.currentTarget ... 

});

e.currentTarget是當前錨剛剛點擊

來源

2014-09-13 16:52:37 TheSoul

非常感謝！我們正在將我們的項目從bootstrap2升級到bootstrap3，並且它已經修復了！ – normalUser

這些都應該工作。

$(e.target).attr('href');
e.target.hash;
$(this).attr('href');
this.hash

來源

2014-10-07 17:12:06 Jashwant

Twitter Bootstrap - 在選項卡上執行操作「顯示」事件

回答

相關問題