Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2011-09-02
6
Medium Priority
?
235 Views
Last Modified: 2013-12-10
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
0
Comment
Question by:directxBOB
  • 2
6 Comments
 
LVL 83

Expert Comment

by:leakim971
ID: 36479039
double check you have the right number of end tag (or start)

<div>
</div>
</div>

0
 

Author Comment

by:directxBOB
ID: 36481214
I've double checked them in all files.
0
 
LVL 43

Accepted Solution

by:
Rob earned 2000 total points
ID: 36481939
have you tried with cookie persistence?  That way when the page reloads the tab is remembered

http://jqueryui.com/demos/tabs/#cookie
0
 
LVL 43

Expert Comment

by:Rob
ID: 36481954
see here for a working version: http://jsfiddle.net/rjurd/KWDsK/

0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

885 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question