Jquery tabs and following a tab's URL instead of loading its content via ajax

Question

When I use the below code I'm unable to get selected tab selected(highlighted). I'm wondering if I can reload the same page when I click on a tab and get the newly select tab to be selected. Right now that is not happening. The page is design to display different info base my parameter "a". Also, I do not want use ajax.

<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />

<script type="text/javascript" src="../../jquery-1.4.min.js"></script>

<script type="text/javascript" src="../../jquery-ui-1.7.2.custom.min.js"></script>

<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
   $('#tabs').tabs({
        select: function(event, ui) {
                      var url = $.data(ui.tab, 'load.tabs');
                      if (url) {
                          location.href = url;
                          return false;
                      }
                     return true;
        }
    });   
});
</script>

<div id="tabs">
<ul>

    <li><a href="default.aspx?a=1">tab 1</a></li>

    <li><a href="default.aspx?a=2">tab 2</a></li>

    <li><a href="default.aspx?a=2">tab 3</a></li>
</ul>
</div>

Any help would be great. Thanks

Answer 1

I'd suggest using the cookie option with the cookie plugin and store the selected tab in the cookie so that it becomes the default when the page loads. This will have the effect, though, of the tab remaining sticky as you navigate to it via other means.