Вкладка JQuery Выбор проблемы?

Question

Новое в JQuery, и мне было интересно, как мне сохранить вкладку, выбранную, когда пользователь перезагружает веб-страницу? Какую часть моего кода мне нужно изменить?

Вот мой код 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; 
    }); 

}); 

Адрес: 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

Вы должны проверить, существует ли какой-либо из # ваших-tab-идентификаторов в URL-адресе в качестве якоря (или хэша). Один из способов сделать это:

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

Answer 2

Одним из вариантов было бы использование файла cookie для сохранения значения щелкнутой вкладки. Существует плагин jQuery, который поможет вам сделать это легко.

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

Я лично предпочитаю это по любому URL фразировки ... с этим плагином, скажем, это вкладка идентификатор 2 вы просто делаете это в вашем OnClick ...

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

Тогда, когда вы в своем $ (документе). уже отмените значение файла cookie, чтобы установить нужную вкладку.

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