Setting JQuery selected does nothing

Setting JQuery selected does nothing

I have the following layout
<div id="tabs">
<ul>
<li><a href="#tabs-1">Create Username</a></li>
<li><a href="#tabs-2">View Search Logs</a></li>
<li><a href="#tabs-3">Assign Values Table</a></li>
<li><a href="#tabs-4">Edit Values Table</a></li>
<li><a href="#tabs-5">Create Values Table</a></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.