Can't retrieve selected Tab

Can't retrieve selected Tab


Hi, I'm tryng to retrieve the selected tab, and after reading the doc
I wrote this code:
$(document).ready(function(){
$tabs = $(".tabs").tabs({ select : function(event, ui) {
$('<li>Select Event</li>').appendTo($('#logs'));
$('<li>Tab Selected :'+ui.index+'</li>').appendTo($('#logs'));
}});
$('<li>Tabs Created</li>').appendTo($('#logs'));
$('<li>Selected Tab on load :'+$tabs.data('selected.tabs')+'</
li>').appendTo($('#logs'));
$tabs.bind('tabsselect', function() {
$('<li>Tab Clicked</li>').appendTo($('#logs'));
});
});
and this markup:
<div id="tabs_links">
<ul class="tabs">
<li><a href="#tab1"><span>Tab 1</span></a></li>
<li><a href="#tab2"><span>Tab2</span></a></li>
</ul>
<div id="tab1">
<span>TAB 1</span>
</div>
<div id="tab2">
<span>TAB 2</span>
</div>
</div>
<ul id="logs"></ul>
I've also put this page at this address: http://lab.gianiaz.com/jquery/selected_tab/problem.html
But in my logs when I click on a tab I read:
Tab Selected :undefined
What I'm doing wrong?