我正在尝试制作一个jquery选项卡,该选项卡记得页面刷新时最后一个选项卡。我已经找到了下面的小提琴,并适应了我在php的需求,但我是新手与java脚本,我不完全理解它是如何工作的,所以我不能弄清楚我怎么能在javascript或javascript结合php记住什么选项卡是当页面刷新。
HTML:<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<div id="tabs">
<ul>
<li>
<a href="#a">Tab A</a>
</li>
<li>
<a href="#b">Tab B</a>
</li>
<li>
<a href="#c">Tab C</a>
</li>
<li>
<a href="#d">Tab D</a>
</li>
</ul>
<div id="a">
Content of A
</div>
<div id="b">
Content of B
</div>
<div id="c">
Content of C
</div>
<div id="d">
Content of D
</div>
</div>
JavaScript: $('#tabs')
.tabs()
.addClass('ui-tabs-vertical ui-helper-clearfix');
小提琴
你必须在你的URL中设置标签或链接的哈希值,然后jQuery UI将自动执行,这里是你的jQuery代码示例
$(function(){
$('#tabs')
.tabs()
.addClass('ui-tabs-vertical ui-helper-clearfix');
$("#tabs>ul>li>a").on('click', function(event) {
window.location.hash = event.target.hash;
})
});
注意:在jsfiddle
中不起作用
当锚点被点击时,添加一个片段标识符到URL,例如http://example.com/#b。然后在页面加载时,您可以检查这一点并显示正确的选项卡。
下面是一个演示它的小提琴,但不能在小提琴上工作,因为它需要更改URL: http://jsfiddle.net/rgRp3/5/
$('a').click(function() {
window.location.hash = $(this).attr('href').replace('#', '');
});
$(document).ready( function() {
var selected = window.location.hash;
if (selected != '') {
$('#a').hide();
$(selected).show();
}
});