jQuery - 捕获选项卡选择事件答案

【问题标题】：jQuery - trapping tab select eventjQuery - 捕获选项卡选择事件
【发布时间】：2011-04-08 03:44:53
【问题描述】：

我是一个 jQuery 菜鸟，我正在尝试弄清楚如何捕获选项卡选定事件。使用 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', 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>

【问题讨论】：

这是一个 jquery-ui 问题吗？如果是，请正确标记它

标签： jquery jquery-ui jquery-ui-tabs

【解决方案1】：

旧版本的 jquery ui 似乎不再支持 select 事件了。

此代码适用于新版本：

$('.selector').tabs({
                    activate: function(event ,ui){
                        //console.log(event);
                        console.log(ui.newTab.index());
                    }
});

【讨论】：

这适用于我在 jQuery 1.9.x 上。正是我需要的谢谢！
使用beforeActivate 作为替代。请参阅文档jqueryui.com/upgrade-guide/1.9/…
@peter，具有讽刺意味的是，我使用的是旧版本的 jQuery，而您的评论让我感到非常沮丧。谢谢！
我希望这是这个问题的选择答案。谢谢。

【解决方案2】：

捕获选项卡选择事件的正确方法是在初始化选项卡时将一个函数设置为select选项的值（您也可以在之后动态设置它们），如下所示：

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

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

编辑： 使用您给我的链接，我已经使用 jQuery UI 1.5（我认为？）为 jQuery 1.2.3 创建了一个测试环境。从那时起，有些事情显然发生了变化。没有单独的 ui 对象与原始 event 对象分开。代码看起来像这样：

// 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 的用户，请尝试以下操作：

$("#tabs").tabs({
    activate: function (event, ui) {
        console.log(event);
    }
});

【讨论】：

这在 jsfiddle 中工作得很好，但是当我将它复制到我的代码时，我得到一个“索引”为空或不是对象错误。想法？
@user 您使用的是 jQuery 1.2.3，对吗？该演示使用 1.3.2 和 jQuery UI 1.7.2 设置。那是他们拥有的最古老的版本。现在不可能找到旧版本所需的文档，所以这大约是我们能做的，尽管您可以尝试用tabselect 替换select - 更改日志表明select 是在@987654333 之后的某个时间引入的@ 替换它。
非常感谢易。我认为我们的代码基于cse-mjmcl.cse.bris.ac.uk/blog/2008/05/15/1210851116949.html，并且使用了非常早期版本的 ui 选项卡。我正在阅读该演示所基于的站点上的文档，并且我看到了对 tabsselect 的引用，就像您提到的那样。希望我能想出一个解决方案。谢谢。
我认为使用“show”而不是“select”可能会奏效。谢谢。
附带说明：activate: 为我工作。由于 JQueryUI- 1.10 select 事件已不复存在！

【解决方案3】：

这篇文章展示了一个完整的工作 HTML 文件，作为单击选项卡时触发代码运行的示例。 .on() 方法现在是 jQuery 建议您处理事件的方式。

jQuery development history

要在用户单击选项卡时发生某些事情，可以通过给列表元素一个 id 来完成。

<li id="list">

然后引用id。

$("#list").on("click", function() {
 alert("Tab Clicked!");
});

确保您使用的是当前版本的 jQuery api。参考谷歌的jQuery api，你可以在这里得到链接：

https://developers.google.com/speed/libraries/devguide#jquery

这是一个标签页的完整工作副本，当单击水平标签 1 时会触发警报。

<!-- This HTML doc is modified from an example by:  -->
<!-- http://keith-wood.name/uiTabs.html#tabs-nested -->

<head>
<meta charset="utf-8">
<title>TabDemo</title>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/south-street/jquery-ui.css">

<style>
pre {
clear: none;
}
div.showCode {
margin-left: 8em;
}
.tabs {
margin-top: 0.5em;
}
.ui-tabs { 
padding: 0.2em; 
background: url(http://code.jquery.com/ui/1.8.23/themes/south-street/images/ui-bg_highlight-hard_100_f5f3e5_1x100.png) repeat-x scroll 50% top #F5F3E5; 
border-width: 1px; 
} 
.ui-tabs .ui-tabs-nav { 
padding-left: 0.2em; 
background: url(http://code.jquery.com/ui/1.8.23/themes/south-street/images/ui-bg_gloss-wave_100_ece8da_500x100.png) repeat-x scroll 50% 50% #ECE8DA; 
border: 1px solid #D4CCB0;
-moz-border-radius: 6px; 
-webkit-border-radius: 6px; 
border-radius: 6px; 
} 
.ui-tabs-nav .ui-state-active {
border-color: #D4CCB0;
}
.ui-tabs .ui-tabs-panel { 
background: transparent; 
border-width: 0px; 
}
.ui-tabs-panel p {
margin-top: 0em;
}
#minImage {
margin-left: 6.5em;
}
#minImage img {
padding: 2px;
border: 2px solid #448844;
vertical-align: bottom;
}

#tabs-nested > .ui-tabs-panel {
padding: 0em;
}
#tabs-nested-left {
position: relative;
padding-left: 6.5em;
}
#tabs-nested-left .ui-tabs-nav {
position: absolute;
left: 0.25em;
top: 0.25em;
bottom: 0.25em;
width: 6em;
padding: 0.2em 0 0.2em 0.2em;
}
#tabs-nested-left .ui-tabs-nav li {
right: 1px;
width: 100%;
border-right: none;
border-bottom-width: 1px !important;
-moz-border-radius: 4px 0px 0px 4px;
-webkit-border-radius: 4px 0px 0px 4px;
border-radius: 4px 0px 0px 4px;
overflow: hidden;
}
#tabs-nested-left .ui-tabs-nav li.ui-tabs-selected,
#tabs-nested-left .ui-tabs-nav li.ui-state-active {
border-right: 1px solid transparent;
}
#tabs-nested-left .ui-tabs-nav li a {
float: right;
width: 100%;
text-align: right;
}
#tabs-nested-left > div {
height: 10em;
overflow: auto;
}
</pre>

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

<script>
    $(function() {
    $('article.tabs').tabs();
    });
</script>

</head>
<body>
<header role="banner">
    <h1>jQuery UI Tabs Styling</h1>
</header>

<section>

<article id="tabs-nested" class="tabs">
<script>
    $(document).ready(function(){
    $("#ForClick").on("click", function() {
        alert("Tab Clicked!");
    });
    });
</script>
<ul>
    <li id="ForClick"><a href="#tabs-nested-1">First</a></li>
    <li><a href="#tabs-nested-2">Second</a></li>
    <li><a href="#tabs-nested-3">Third</a></li>
</ul>
<div id="tabs-nested-1">
    <article id="tabs-nested-left" class="tabs">
        <ul>
            <li><a href="#tabs-nested-left-1">First</a></li>
            <li><a href="#tabs-nested-left-2">Second</a></li>
            <li><a href="#tabs-nested-left-3">Third</a></li>
        </ul>
        <div id="tabs-nested-left-1">
            <p>Nested tabs, horizontal then vertical.</p>


<form action="/sign" method="post">
  <div><textarea name="content" rows="5" cols="100"></textarea></div>
  <div><input type="submit" value="Sign Guestbook"></div>
</form>
        </div>
        <div id="tabs-nested-left-2">
            <p>Nested Left Two</p>
        </div>
        <div id="tabs-nested-left-3">
            <p>Nested Left Three</p>
        </div>
    </article>
</div>
<div id="tabs-nested-2">
    <p>Tab Two Main</p>
</div>
<div id="tabs-nested-3">
    <p>Tab Three Main</p>
</div>
</article>

</section>

</body>
</html>

【讨论】：

【解决方案4】：

据我所知，根据此处的文档：http://jqueryui.com/demos/tabs/#event-select，您似乎没有完全正确地初始化它。演示说明您需要一个主要包装的<div> 元素，带有一个<ul> 或可能<ol> 元素代表选项卡，然后是每个选项卡页的一个元素（可能是<div> 或<p>，可能是一个<section> 如果我们使用的是 HTML5）。然后你在 <div> 主元素上调用 $().tabs()，而不是 <ul> 元素。

之后，你可以绑定到 tabsselect 事件没有问题。查看这个小提琴的基本示例：

http://jsfiddle.net/KE96S/

【讨论】：

【解决方案5】：

在以后的 JQuery 版本中，他们将功能从选择更改为激活。 http://api.jqueryui.com/tabs/#event-activate

【讨论】：

【解决方案6】：

简单地说：

$("#tabs_div").tabs();
$("#tabs_div").on("click", "a.tab_a", function(){
    console.log("selected tab id: " + $(this).attr("href"));
    console.log("selected tab name: " + $(this).find("span").text());
});

但是您必须将类名添加到名为“tab_a”的锚点：

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

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

【讨论】：

使用事件委托的好习惯！

【解决方案7】：

只需对显示的选项卡使用 on click 事件。

$(document).on('shown.bs.tab', 'a[href="#tab"]', function (){
});

【讨论】：

问题是关于 Jquery UI 选项卡，而不是 BS 选项卡。