Question

我正在尝试创建一个jquery选项卡，用于记住页面刷新时哪个选项卡是最后一个。我已经找到了下面的小提琴，并适应了我在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

你必须在你的网址中设置标签或链接的哈希值，然后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中不起作用

Answer 2

单击锚点时，将片段标识符添加到URL，例如http://example.com/#b。然后在页面加载时，您可以检查并显示正确的选项卡。

这是一个演示它的小提琴，但不适用于小提琴，因为它需要更改网址：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();
    }
});

jQuery垂直标签仍然在刷新

2 个答案: