Question

Hy ,

I have the following code for mai tabs …

$(document).ready(function() {

    $("#continut_right div.tab").hide();
    $("#continut_right div.tab:first-child").show();

    $("#navigatie_left ul li").click(function() {
        var id_tab = $(this).attr("id");
        $("#continut_right div.tab").hide();
        $("#continut_right").children("#" + id_tab).show();
    });

and the markup is something like this :

<div id="continut_right">
   <!-- tab 1 -->       
   <div class="tab" id="id1"> 
   content ... bla bla bla
   </div>
</div>

and the menu that trigger tabs to change :

<div id="navigatie_left">
    <a style="text-decoration: none; color:#000; font-family:Arial; font-size:15px; font-weight:bold;" href="<?php echo $_SERVER['PHP_SELF']; ?>">[ REFRESH ]</a>
        <br /><br />
        <ul>
            <li id="id1">Categorii principale</li>
            <li id="id2">Categorii secundare</li>
            <li id="id2">Texte categorii secundare</li>
        </ul>
    </div>

How can i implement a code … to remember what tab was opened because when i do a form submit to php_self to keep that tab open to see changes … ??

Thanks a lot

Answer 1

You could look into .appendTo()’s JSON Cookie solution. it would offer an easy method of storing and retrieving the last-active tab.

The usage is documented as follows:

$.cookie( string key, mixed value [, hash options ] )

So you could store the index of the active tab:

$.cookie( 'activeTab', '3' );

And then retrieve it on page load with:

$.cookie( 'activeTab' ); //returns the set value

So let’s look at how you could implement it:

$("#navigatie_left ul li").click(function() {
    var id_tab = $(this).attr("id");
    $.cookie( 'activeTab', id_tab ); // storing the new active tab
    $("#continut_right div.tab").hide();
    $("#continut_right").children("#" + id_tab).show();
});

Now for us to automatically show the tab on page load:

$(document).ready(function() {

    $("#continut_right div.tab").hide();
    $("#continut_right div.tab:first-child").show();
    // Which tab should we show on document.ready?
    $("#continut_right").children("#" + $.cookie('activeTab')).show();

});