Onglet JQuery Problème de sélection?

Question

Nouveau sur JQuery et je me demandais comment garder les onglets sélectionnés quand un utilisateur recharge la page web? Quelle partie de mon code dois-je changer?

Voici mon code JQuery.

$(document).ready(function() { 

    //When page loads... 
    $(".form-content").hide(); //Hide all content 
    var firstMenu = $("#home-menu ul li:first"); 
    firstMenu.show(); 
    firstMenu.find("a").addClass("selected-link"); //Activate first tab 
    $(".form-content:first").show(); //Show first tab content 

    //On Click Event 
    $("#home-menu ul li").click(function() { 

     $("#home-menu ul li a").removeClass("selected-link"); //Remove any "selected-link" class 
     $(this).find("a").addClass("selected-link"); //Add "selected-link" class to selected tab 
     $(".form-content").hide(); //Hide all tab content 

     var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the selected-link tab + content 
     $(activeTab).fadeIn(); //Fade in the selected-link ID content 
     return false; 
    }); 

}); 

Voici le code XHTML.

<div id="home-menu"> 
    <ul> 
     <li><a href="#personal-info-form" title="Personal Info Form Link">Personal Info</a></li> 
     <li><a href="#contact-info-form" title="Contact Info Form Link">Contact Info</a></li> 
    </ul> 
</div> 


<div> 

    <div id="personal-info-form" class="form-content"> 

    <h2>Personal Information</h2> 
     <form method="post" action="index.php"> 
      <fieldset> 
       <ul> 
        <li><label for="first_name">First Name: </label><input type="text" name="first_name" id="first_name" size="25" class="input-size" value="<?php if(!empty($first_name)){ echo $first_name; } ?>" /></li> 
        <li><label for="middle_name">Middle Name: </label><input type="text" name="middle_name" id="middle_name" size="25" class="input-size" value="<?php if(!empty($middle_name)){ echo $middle_name; } ?>" /></li> 
        <li><label for="last_name">Last Name: </label><input type="text" name="last_name" id="last_name" size="25" class="input-size" value="<?php if(!empty($last_name)){ echo $last_name; } ?>" /></li> 
        <li><label for="password-1">Password: </label><input type="password" name="password1" id="password-1" size="25" class="input-size" /></li> 
        <li><label for="password-2">Confirm Password: </label><input type="password" name="password2" id="password-2" size="25" class="input-size" /></li> 
        <li><input type="submit" name="submit" value="Save Changes" class="save-button" /> 
        <input type="submit" name="submit" value="Preview Changes" class="preview-changes-button" /></li> 
       </ul> 
      </fieldset> 
     </form> 

    </div> 


    <div id="contact-info-form" class="form-content"> 

    <h2>Contact Information</h2> 
     <form method="post" action="index.php" id="contact-form"> 
      <fieldset> 
       <ul> 
        <li><label for="address">Address 1: </label><input type="text" name="address" id="address" size="25" class="input-size" value="<?php if (isset($_POST['address'])) { echo $_POST['address']; } else if(!empty($address)) { echo $address; } ?>" /></li> 
        <li><label for="address_two">Address 2: </label><input type="text" name="address_two" id="address_two" size="25" class="input-size" value="<?php if (isset($_POST['address_two'])) { echo $_POST['address_two']; } else if(!empty($address_two)) { echo $address_two; } ?>" /></li> 
        <li><label for="city_town">City/Town: </label><input type="text" name="city_town" id="city_town" size="25" class="input-size" value="<?php if (isset($_POST['city_town'])) { echo $_POST['city_town']; } else if(!empty($city_town)) { echo $city_town; } ?>" /></li> 
        <li><input type="submit" name="submit" value="Save Changes" class="save-button" /> 
         <input type="hidden" name="contact_info_submitted" value="true" /> 
        <input type="submit" name="submit" value="Preview Changes" class="preview-changes-button" /></li> 
       </ul> 
      </fieldset> 

     </form> 

    </div> 

</div> 

Answer 1

Vous devez vérifier si l'un de vos #-tab-ids existe dans l'URL comme point d'ancrage (ou hachage). Une façon de le faire:

var m = window.location.href.match(/#(.+)$/); 
if (m && m[1]) $('#home-menu ul a[href=#' + m[1] + ']').parent().click(); 

Answer 2

Une option consisterait à utiliser un cookie pour stocker la valeur de l'onglet cliqué. Il y a un plugin jQuery pour vous aider à le faire facilement.

http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/

Je préfère personnellement ce phrasé sur toute URL ... avec ce plugin, dire qu'il est l'onglet ID2 vous venez dans votre onclick ...

$.cookie("mySelectedTab", "2"); //set 

Puis, quand Dans votre $ (document), vous retirez la valeur du cookie pour définir l'onglet souhaité.

$.cookie("example"); // read it back