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;
                    }
                });
               
            });

Open 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>

Open 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
directxBOBAsked:
Who is Participating?
 
RobConnect With a Mentor Owner (Aidellio)Commented:
have you tried with cookie persistence?  That way when the page reloads the tab is remembered

http://jqueryui.com/demos/tabs/#cookie
0
 
leakim971PluritechnicianCommented:
double check you have the right number of end tag (or start)

<div>
</div>
</div>

0
 
directxBOBAuthor Commented:
I've double checked them in all files.
0
 
RobOwner (Aidellio)Commented:
see here for a working version: http://jsfiddle.net/rjurd/KWDsK/

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.