Loading a page into the tab, and selecting the correct tab?

I have a page which contains JQuery tabs (taken straight from the Jquery API)

My JQuery function:
 

$(function(){

                // Tabs                
                $('#tabs').tabs({
                    select: function(event, ui) {
        
                        var url = $.data(ui.tab, 'load.tabs');
                        if( url ) {
                            location.href = url;
                            return false;
                        }
                        return true;
                    }
                });
               
            });

Select allOpen in new window

My Page

<div id="tabs">
                    <ul>
                        <li><a href="index.xhtml">Home</a></li>
                        <li><a href="#tabs-1">Products</a></li>
                        <li><a href="latest.xhtml">Latest</a></li>
                    </ul>
                    <div id="tabs-1">
.... This tabs contents....
</div>
</div>

Select allOpen in new window

The problem I am having is that when I click a tab it loads the page but the 1st tab is always selected.

How do I set the index based on the page I've selected

Thanks