UI TABS - Selection Event Information

by bizamajig

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css">
<div id='tabs'>
    <ul>
        <li><a href='#tab1'>Tab 1</a></li>
        <li><a href='#tab2'>Tab 2</a></li>
    </ul>
    
    <div id='tab1'>This is tab 1</div>
    <div id='tab2'>This is tab 2</div>
</div>

CSS

body {
    font-size: 13px;
    font-family: Arial, sans-serif;
}

p {
    font-size: 12px;
    line-height: 1.5em;
}

JavaScript

$(document).ready(function(){
    $('#tabs').tabs();
    
    $('#tabs').bind('tabsselect',function(event, ui) {
        console.log(ui);

                // You need Firebug or the developer tools on your browser open to see these
                console.log(event.tab);
                // 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);
                console.log( 'The tab at index ' + ui.index + ' was selected' );
                console.log( 'Options: ' + ui.options + '.' );
                console.log( 'Tab: ' + ui.tab + ' was selected' );
                console.log( 'Panel: ' + ui.panel + ' was selected' );

    });
});