JQuery tabs - how do go to the selected tab after reloading a page

I use the following script, but not working. I always go back to the first tab after reloading a page. For an example, If I select tab2, after reloading a page, i like to go back to selected tab2.
I looked at the JQuery menu, but i do not understand. Please advise and correct my mistake


$(function(){
      $('#tabs').tabs();
      var $tabs = $('#example').tabs();
      var selected = $tabs.tabs('option', 'selected');
      $tabs.tabs('select', selected);
});
</script>
unistudentAsked:
Who is Participating?
 
designatedinitializerConnect With a Mentor Commented:
You'll have to store that info in a cookie and retrieve it on page load.
You can do this inside the 'select' event handler:
$.cookie("myselectedtab", $tabs.tabs('option', 'selected'));

Open in new window


and this, inside a $(document).ready:
$tabs.tabs('select',$.cookie("myselectedtab"));

Open in new window

0
 
BuggyCoderConnect With a Mentor Commented:
see this for your reference:-
http://jqueryui.com/demos/tabs/
0
 
unistudentAuthor Commented:
I did that's why I added the following two lines


                        // Tabs
                      $('#tabs').tabs();
                      var $tabs = $('#tabs').tabs();
                      var selected = $tabs.tabs('option', 'selected');
                      alert("selected[" + selected + "]");
                       $tabs.tabs('select', selected);

after a page is reloaded, the selected var is set back to 0 "The first tab"
0
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
BuggyCoderCommented:
$('#example').tabs({
    load: function(event, ui) {
        $(ui.panel).delegate('a', 'click', function(event) {
            $(ui.panel).load(this.href);
            event.preventDefault();
        });
    }
});
0
 
unistudentAuthor Commented:
Hi designatedinitializer

would you give me an example of select event handler? Thanks
0
 
BuggyCoderConnect With a Mentor Commented:
did you try the script given by me... the key is to set preventDefault=false....
0
 
unistudentAuthor Commented:
I did try, but it still go back to the first tab after reloading the page. Sorry, it may not be a good question but this is my first time to use JQuery.

Below is my script and HTML.

<script type="text/javascript">
$(function(){

 $('#tabs').tabs();

 $('#tabs').tabs({
   load: function(event, ui) {
         $(ui.panel).delegate('a', 'click', function(event) {
            $(ui.panel).load(this.href);
            event.preventDefault();
         });
   }
  });

});
</script>

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
HTML codes

<div id="tabs">
  <ul>
     <li><a href="#tabs-1"">Sign Up</a></li>
     <li><a href="#tabs-2">Member Logon</a></li>
     <li><a href="#tabs-3">Forgot Password</a></li>
  </ul>

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Would you please advise how to resolve this issue as I am very new in JQuery?
0
 
unistudentAuthor Commented:
I also try the following, but it still does not work.'


<script type="text/javascript">
$(function(){
      $(".selector").tabs({cookie: { expires:30 }});
      
      // Tabs
      $('#tabs').tabs();
      //hover states on the static widgets
      
      $(document).ready(function() {
         $("tabs").tabs('select', $.cookie("tabNumber"));
         $("tabs").click(function() {
           $.cookie("tabNumber", $("tabs").tabs('option', 'selected'));
         });
      });
      
      $('#dialog_link, ul#icons li').hover(
            function() { $(this).addClass('ui-state-hover'); },
            function() { $(this).removeClass('ui-state-hover'); }
      );
      
      $('#tabs').tabs({
          load: function(event, ui) {
              $(ui.panel).delegate('a', 'click', function(event) {
                  $(ui.panel).load(this.href);
                  event.preventDefault();
              });
          },
      });

});
</script>
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.