记住页面重新加载后的jQuery选项卡位置 [英] Remembering jQuery tab position after page reloads
本文介绍了记住页面重新加载后的jQuery选项卡位置的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个包含一些GridView的页面。我使用选项卡菜单将它们保存在选项卡中。有四个选项卡。
I have a page that contains some GridViews. I have kept them in tabs using tab-menu. There are four tabs.
我的问题是当页面重新加载时,选项卡会重置为第一个选项卡。
My problem is when the page reloads, the tab gets reset to the first tab.
HTML:
<div id="tabbed_box_1" class="tabbed_box">
<div class="tabbed_area">
<ul class="tabs">
<li><a href="#" title="content_1" class="tab active">Bottom Banner</a></li>
<li><a href="#" title="content_2" class="tab">Side Banner Bottom</a></li>
<li><a href="#" title="content_3" class="tab">Side Banner Top</a></li>
<li><a href="#" title="content_4" class="tab">Main Ad</a></li>
</ul>
<div id="content_1" class="content">
<table width="500" border="0" align="center" cellpadding="0" cellspacing="2" class="border">
<tr>
<td align="center">
//some gridview here
</td>
</tr>
</table>
</div>
//similarly three more gridviews
jQuery:
$(document).ready(function () {
// When a link is clicked
$("a.tab").click(function () {
// switch all tabs off
$(".active").removeClass("active");
// switch this tab on
$(this).addClass("active");
// slide all content up
$(".content").slideUp();
// slide this content up
var content_show = $(this).attr("title");
$("#" + content_show).slideDown();
});
});
如果页面重新加载后如何制作当前点击的标签页呢?
How can I make the currently-clicked tab show even after page reloads?
推荐答案
简单的解决方案是使用 localStorage 保持选择:
The simple solution is to use localStorage to persist the selection :
$(document).ready(function () {
function activate(tab) {
// switch all tabs off
$(".active").removeClass("active");
// switch this tab on
tab.addClass("active");
// slide all content up
$(".content").slideUp();
// slide this content up
var content_show = tab.attr("title");
$("#" + content_show).slideDown();
}
if (localStorage) { // let's not crash if some user has IE7
var index = parseInt(localStorage['tab']||'0');
activate($('a.tab').eq(index));
}
// When a link is clicked
$("a.tab").click(function () {
if (localStorage) localStorage['tab'] = $(this).closest('li').index();
activate($(this));
});
});
这篇关于记住页面重新加载后的jQuery选项卡位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文