JQuery选项卡选择问题?
刚接触JQuery,我想知道当用户重新加载网页时,如何保持任何选项卡处于选中状态?我需要更改代码的哪一部分 这是我的JQuery代码JQuery选项卡选择问题?,jquery,Jquery,刚接触JQuery,我想知道当用户重新加载网页时,如何保持任何选项卡处于选中状态?我需要更改代码的哪一部分 这是我的JQuery代码 $(document).ready(function() { //When page loads... $(".form-content").hide(); //Hide all content var firstMenu = $("#home-menu ul li:first"); firstMenu.show(); f
$(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>
个人信息
- 名字:您必须检查您的选项卡ID是否作为锚(或散列)存在于URL中。一种方法是:
var m = window.location.href.match(/#(.+)$/);
if (m && m[1]) $('#home-menu ul a[href=#' + m[1] + ']').parent().click();
一个选项是使用cookie存储单击的选项卡的值。有一个jQuery插件可以帮助您轻松地完成这项工作
我个人更喜欢这个,而不是任何URL措辞…有了这个插件,就说它是tab id 2,你只要在你的onclick中这样做
$.cookie("mySelectedTab", "2"); //set
然后,当您在$(document.ready)中输入cookie值时,可以将cookie值向后拉,以设置所需的选项卡
$.cookie("example"); // read it back
是否要在用户重新加载时保留选定的默认选项卡以外的选项卡?i、 e.默认为选项卡1,用户按选项卡2,重新加载页面。。。现在,选项卡2是默认值。