jQuery - trapping tab select event
it seems the old's version's of jquery ui don't support select event anymore.
This code will work with new versions:
$('.selector').tabs({ activate: function(event ,ui){ //console.log(event); console.log(ui.newTab.index()); }});
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 }});You can see the actual code in action here: 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 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); }});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/
Edit: For those who is using newer version of jQuery, try the following:
$("#tabs").tabs({ activate: function (event, ui) { console.log(event); }});
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.
To make something happen when the user clicks a tab can be done by giving the list element an id.
<li id="list">Then referring to the 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:
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.
<!-- 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>