javascript - 保持刷新的 jQuery 垂直选项卡

Question

我正在尝试制作一个 jquery 选项卡，它会在页面刷新时记住最后一个选项卡。我在下面找到了 fiddle 并适应了我在 php 中的需要，但我是 jave 脚本的新手，我不完全理解它是如何工作的所以我无法弄清楚我可以在 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');

Fiddle

Answer 1

您必须在您的 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;
    })
});

NOTE: This will not work in jsfiddle