jQuery - 捕获选项卡选择事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3641154/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - trapping tab select event
提问by Bob76
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
我是一个 jQuery 菜鸟，我正试图弄清楚如何捕获选项卡选定的事件。使用 jQuery 1.2.3 和相应的 jQuery UI 选项卡（不是我的选择，我无法控制它）。这是一个带有第一级 div 名称的嵌套选项卡 - 选项卡。这就是我初始化选项卡的方式
$(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...
我无法弄清楚如何捕获任何事件或属性（选定的选项卡、单击选项卡时等）。将不胜感激任何帮助...
I tried things like:
我试过这样的事情：
$('#tabs ul').bind('tabsselect', function(event, ui) {
selectedTab = ui.index;
alert('selectedTab : ' + selectedTab);
});
(OR)
$('#tabs').bind('tabsselect', function(event, ui) {
with no success.
没有成功。
Below is the markup
下面是标记
<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>
回答by Pjl
it seems the old's version's of jquery ui don't support select event anymore.
似乎旧版本的 jquery ui 不再支持 select 事件。
This code will work with new versions:
此代码适用于新版本：
$('.selector').tabs({
activate: function(event ,ui){
//console.log(event);
console.log(ui.newTab.index());
}
});
回答by Yi Jiang
The correct method for capturing tab selection event is to set a function as the value for the selectoption when initializing the tabs (you can also set them dynamically afterwards), like so:
捕获选项卡选择事件的正确方法是select在初始化选项卡时将一个函数设置为选项的值（您也可以在之后动态设置它们），如下所示：
$('#tabs, #fragment-1').tabs({
select: function(event, ui){
// Do stuff here
}
});
You can see the actual code in action here: http://jsfiddle.net/mZLDk/
你可以在这里看到实际的代码：http: //jsfiddle.net/mZLDk/
Edit: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 uiobject which was separated from the original eventobject. The code looks something like this:
编辑：通过您给我的链接，我使用 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);
}
});
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/
呼。如果说这里有什么要学习的，那就是支持遗留代码很困难。有关更多信息，请参阅 jsfiddle：http: //jsfiddle.net/qCfnL/1/
Edit:For those who is using newer version of jQuery, try the following:
编辑：对于那些使用较新版本 jQuery 的人，请尝试以下操作：
$("#tabs").tabs({
activate: function (event, ui) {
console.log(event);
}
});
回答by Alan Wells
This post shows a complete working HTML file as an example of triggering code to run when a tab is clicked. The .on() method is now the way that jQuery suggests that you handle events.
这篇文章展示了一个完整的工作 HTML 文件，作为在单击选项卡时触发代码运行的示例。.on() 方法现在是 jQuery 建议您处理事件的方式。
To make something happen when the user clicks a tab can be done by giving the list element an id.
要在用户单击选项卡时发生某些事情，可以通过给列表元素一个 id 来完成。
<li id="list">
Then referring to the id.
然后参考id。
$("#list").on("click", function() {
alert("Tab Clicked!");
});
Make sure that you are using a current version of the jQuery api. Referencing the jQuery api from Google, you can get the link here:
确保您使用的是当前版本的 jQuery api。引用来自 Google 的 jQuery api，您可以在此处获取链接：
https://developers.google.com/speed/libraries/devguide#jquery
https://developers.google.com/speed/libraries/devguide#jquery
Here is a complete working copy of a tabbed page that triggers an alert when the horizontal tab 1 is clicked.
这是一个选项卡式页面的完整工作副本，当单击水平选项卡 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>
回答by Vinay Anantharaman
In later versions of JQuery they have changed the function from select to activate. http://api.jqueryui.com/tabs/#event-activate
在更高版本的 JQuery 中，他们将功能从选择更改为激活。 http://api.jqueryui.com/tabs/#event-activate
回答by rossipedia
From what I can tell, per the documentation here: http://jqueryui.com/demos/tabs/#event-select, it seems as though you're not quite initializing it right. The demos state that you need a main wrapped <div>element, with a <ul>or possibly <ol>element representing the tabs, and then an element for each tab page (presumable a <div>or <p>, possibly a <section>if we're using HTML5). Then you call $().tabs() on the main <div>, not the <ul>element.
据我所知，根据此处的文档：http: //jqueryui.com/demos/tabs/#event-select，似乎您没有完全正确地初始化它。演示说明您需要一个主要的包装<div>元素，其中一个<ul>或可能的<ol>元素代表选项卡，然后是每个选项卡页面的元素（假设为 a<div>或<p>，<section>如果我们使用 HTML5 ，则可能为 a ）。然后你在 main 上调用 $().tabs() <div>，而不是在<ul>元素上。
After that, you can bind to the tabsselect event no problem. Check out this fiddle for basic, basic example:
之后，您可以绑定到 tabsselect 事件没问题。查看此小提琴以获得基本的基本示例：
回答by Muhammad Soliman
Simply:
简单地：
$("#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());
});
But you have to add class name to your anchors named "tab_a":
但是您必须将类名添加到名为“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>
回答by Rizwan Mughal
Simply use the on click event for tab shown.
只需对显示的选项卡使用点击事件。
$(document).on('shown.bs.tab', 'a[href="#tab"]', function (){
});
