Setting JQuery selected does nothing - php

Question

I have the following layout
<div id="tabs">
<ul>
<li>Create Username</li>
<li>View Search Logs</li>
<li>Assign Values Table</li>
<li>Edit Values Table</li>
<li>Create Values Table</li>
</ul>
<div id="tabs-1">
<h2>Create Username</h2>
</div>
<div id="tabs-2">
<h2>View Search Logs</h2>
</div>
<div id="tabs-3">
<h2>Assign Values Table</h2>
</div>
<div id="tabs-4">
<h2>Edit Values Table</h2>
</div>
<div id="tabs-5">
<h2>Create Values Table</h2>
</div>
</div>
Each tab has a form in it, when the form is submitted and the page reloads I want the visible tab to still be the tab the user was last on (instead of it going back to the first).
Each form has a hidden field that contains the index of that tab. I then use the below:
<script type="text/javascript">
$(function() {
$("#tabs").tabs({
selected: <?php echo (isset($_POST['selected_tab']) ? $_POST['selected_tab'] : 1)?>
});
});
</script>
This results in showing the right thing e.g
<script type="text/javascript">
$(function() {
$("#tabs").tabs({
selected: 2
});
});
</script>
However the first tab is still the tab that is shown.

Answer 1

$("#tabs").tabs({
selected: 2
});
Should be:
$("#tabs").tabs({
active: 2
});
Tabs uses active property and not selected property.
Also note that the index is base 0, so if you want to select the 2nd tab, your value needs to be 1.

Answer 2

One option would be to include jquery-cookie.js an use tabs like this:
$( "#tabs" ).tabs({
cookie: {
expires: 1
}
});
And this will automatically manage your last open tabs with cookie.