我有一个包含一些 GridView 的页面。我使用选项卡菜单将它们保存在选项卡中。有四个选项卡。
我的问题是,当页面重新加载时,选项卡会重置为第一个选项卡。
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();
});
});
即使页面重新加载后,如何才能显示当前单击的选项卡?
简单的解决方案是使用本地存储 https://developer.mozilla.org/en-US/docs/DOM/Storage坚持选择:
$(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));
});
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)