The following program works in earlier versions of jQuery UI, but it does not work in the latest release.
The select property does not call a function in the handleSelect variable. See the following script: work tab
Here is my code for jQuery UI 1.10.3
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tabs</title> <link rel="stylesheet" href="css/smoothness/jquery-ui-1.10.2.custom.css"> <link rel="stylesheet" href="css/tabSelect.css"> </head> <body> <div id="myTabs"> <ul> <li><a href="#a">Tab 1</a></li> <li><a href="#b">Tab 2</a></li> </ul> <div id="a">This is the content panel linked to the first tab, it is shown by default.</div> <div id="b">This is the content panel linked to the second tab, it is shown when its tab is clicked.</div> </div> <script type="text/javascript" src="development-bundle/jquery-1.9.1.js"></script> <script type="text/javascript" src="development-bundle/ui/jquery.ui.core.js"></script> <script type="text/javascript" src="development-bundle/ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="development-bundle/ui/jquery.ui.tabs.js"></script> <script type="text/javascript" src="development-bundle/ui/jquery.ui.effect.js"></script> <script type="text/javascript" src="development-bundle/ui/jquery.ui.effect-blind.js"></script> <script type="text/javascript"> (function($) { var handleSelect = function(e, tab) { $("<p></p>", { text: "Tab at index " + tab.index + " selected", "class": "status-message ui-corner-all" }).appendTo(".ui-tabs-nav", "#myTabs").fadeOut(5000, function(){ $(this).remove(); }); }, tabOpts = { select : handleSelect }; $("#myTabs").tabs({ select: handleSelect}); })(jQuery); </script> </body> </html>
source share