jQuery – 捕获选项卡选择事件

我是一个jQuery noob,我试图找出如何陷阱选项卡选择事件。
使用jQuery 1.2.3和相应的jQuery UI选项卡(不是我的选择,我没有控制它)。它是一个带有第一级div名称的嵌套选项卡 – 标签。这是我如何初始化选项卡
$(function() {
       $('#tabs ul').tabs();
});

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

我无法弄清楚如何捕获任何事件或属性(选定的标签页,当选项卡点击等)。感谢任何帮助…

我试过像:

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

              (OR)

$('#tabs').bind('tabsselect',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>

解决方法

捕获选项卡选择事件的正确方法是在初始化选项卡时设置一个函数作为选择选项的值(您也可以随后动态设置),如下所示:
$('#tabs,#fragment-1').tabs({
  select: function(event,ui){
    // Do stuff here
  }
});

你可以看到实际代码在这里:http://jsfiddle.net/mZLDk/

编辑:使用你给我的链接,我创建了一个测试环境的jQuery 1.2.3与jQuery UI 1.5(我想?)。有些事情显然从那时起改变了。没有与原始事件对象分离的单独的ui对象。代码看起来像这样:

// 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);
    }
});

。。如果这里有什么需要学习的,那就是支持代码是很难的。请参阅jsfiddle更多:http://jsfiddle.net/qCfnL/1/

相关文章

jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进...
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。 入门 编写一个jQuery插件开始于给...
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。 兼容性如图: ht...
一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异...
AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一...