jQuery垂直选项卡保持在刷新状态


jQuery vertical tabs which remain on refresh

我正在尝试制作一个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();
    }
});