Twitter Bootstrap – 对标签“显示”事件执行操作

我需要根据bootstrap jQuery选项卡部分中的选定选项卡“重置”一些页面信息。

文档显示了这个事件，这正是我需要的： 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个选项卡内容窗格。

这是我的问题： 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 – 但我无法弄明白。

Answer 1

请尝试$(e.target).attr('href') 。

Answer 2

迟到这边是我的看法：

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

e.currentTarget是刚刚单击的当前锚点

Answer 3

如果有人需要知道当前选择了哪个选项卡索引，而无需在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) }); 

Answer 4

这一切都应该有效。

1. $(e.target).attr('href');
2. e.target.hash;
3. $(this).attr('href');
4. this.hash