jQuery-捕获选项卡选择事件 [英] jQuery - trapping tab select event

问题描述

我是jQuery菜鸟，我试图弄清楚如何捕获选项卡选择的事件. 使用jQuery 1.2.3和相应的jQuery UI选项卡(不是我的选择，我无法控制它).这是具有第一层div名称的嵌套选项卡-选项卡.这就是我初始化标签页的方式

I'm a jQuery noob and I'm trying to figure out how to trap the tab selected event. Using jQuery 1.2.3 and corresponding jQuery UI tabs (not my choice and I have no control over it). It's a nested tab with the first level div name - tabs. This is how I initialized the tabs

$(function() {
       $('#tabs ul').tabs();
});

$(document).ready(function(){
    $('#tabs ul').tabs('select', 0); 
}); 

我无法弄清楚如何捕获任何事件或属性(选定的选项卡，单击选项卡时等).希望对此有任何帮助...

I'm not able to figure out how to trap any of the events or properties (selected tab, when tab clicked, etc). Would appreciate any help on this...

我尝试过类似的事情:

$('#tabs ul').bind('tabsselect', function(event, ui) {
    selectedTab = ui.index;
    alert('selectedTab : ' + selectedTab);
});

              (OR)

$('#tabs').bind('tabsselect', function(event, ui) {

没有成功.

下面是标记

<div id="tabs">
<UL>
    <LI><A href="#fragment-1"><SPAN>Tab1</SPAN></A></LI>
    <LI><A href="#fragment-2"><SPAN>Tab2</SPAN></A></LI>
    <LI><A href="#fragment-3"><SPAN>Tab3</SPAN></A></LI>
    <LI><A href="#fragment-4"><SPAN>Tab4</SPAN></A></LI>
</UL>

<DIV id=fragment-1>
<UL>
    <LI><A href="#fragment-1a"><SPAN>Sub-Tab1</SPAN></A></LI>
    <LI><A href="#fragment-1b"><SPAN>Sub-Tab2</SPAN></A></LI>
    <LI><A href="#fragment-1c"><SPAN>Sub-Tab3</SPAN></A></LI>
</UL>
</DIV>
.
.
.

</DIV>

推荐答案

捕获选项卡选择事件的正确方法是在初始化选项卡时将函数设置为select选项的值(您也可以动态设置它们)之后)，就像这样:

The correct method for capturing tab selection event is to set a function as the value for the select option when initializing the tabs (you can also set them dynamically afterwards), like so:

$('#tabs, #fragment-1').tabs({
  select: function(event, ui){
    // Do stuff here
  }
});

您可以在此处查看实际的代码: http://jsfiddle.net/mZLDk/

You can see the actual code in action here: http://jsfiddle.net/mZLDk/

通过您给我的链接，我为带有jQuery UI 1.5的jQuery 1.2.3创建了一个测试环境(我认为呢?).从那时起，有些事情显然发生了变化.没有与原始event对象分离的单独的ui对象.代码看起来像这样:

With the link you gave me, I've created a test environment for jQuery 1.2.3 with jQuery UI 1.5 (I think?). Some things obviously changed from then. There wasn't a separate ui object which was separated from the original event object. The code looks something like this:

// Tab initialization
$('#container ul').tabs({
    select: function(event) {
        // You need Firebug or the developer tools on your browser open to see these
        console.log(event);
        // This will get you the index of the tab you selected
        console.log(event.options.selected);
        // And this will get you it's name
        console.log(event.tab.text);
    }
});

Ph.如果在这里有什么要学习的，那就是支持遗留代码很困难.有关更多信息，请参见jsfiddle: http://jsfiddle.net/qCfnL/1/

Phew. If there's anything to learn here, it's that supporting legacy code is hard. See the jsfiddle for more: http://jsfiddle.net/qCfnL/1/

这篇关于jQuery-捕获选项卡选择事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！