Question

我有以下布局

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Create Username</a></li>
        <li><a href="#tabs-2">View Search Logs</a></li>
        <li><a href="#tabs-3">Assign Values Table</a></li>
        <li><a href="#tabs-4">Edit Values Table</a></li>
        <li><a href="#tabs-5">Create Values Table</a></li>
    </ul>
    <div id="tabs-1">
        <h2>Create Username</h2>

    </div>
    <div id="tabs-2">
        <h2>View Search Logs</h2>

    </div>
    <div id="tabs-3">
        <h2>Assign Values Table</h2>
    </div>
    <div id="tabs-4">
        <h2>Edit Values Table</h2>

    </div>
    <div id="tabs-5">
        <h2>Create Values Table</h2>

    </div>
</div>

每个标签都有一个表单，当提交表单并重新加载页面时，我希望可见标签仍然是用户最后一个标签（而不是返回到第一个标签）。

每个表单都有一个隐藏字段，其中包含该选项卡的索引。然后我使用下面的内容：

<script type="text/javascript">
 $(function() {
     $("#tabs").tabs({ 
            selected: <?php echo (isset($_POST['selected_tab']) ? $_POST['selected_tab'] : 1)?> 
        });
   });

</script>

这导致显示正确的事情，例如

<script type="text/javascript">
 $(function() {
     $("#tabs").tabs({ 
            selected: 2 
        });
   });

</script>

但是，第一个标签仍然是显示的标签。

Answer 1

     $("#tabs").tabs({ 
            selected: 2 
        });

应该是：

     $("#tabs").tabs({ 
            active: 2 
        });

标签使用active属性，而不是selected属性。另请注意，索引是基数0，因此如果要选择第二个选项卡，则值必须为1。

Answer 2

一种选择是将jquery-cookie.js这样的使用标签包括在内：

$( "#tabs" ).tabs({
    cookie: {
        expires: 1
    }
});

这将使用Cookie自动管理您上次打开的标签页。

设置JQuery选择什么都不做

2 个答案: