Question

简单问题：如何在JQuery Mobile（1.4.2）中刷新页面时保留选定的选项卡？

更具体地说：我有一个结果页面，首先通过Django paginator传递来从我的数据库中分割多行结果，但是在页面选择上（？page = 1，？page = 2等甚至刷新）我丢失用户选择的标签。我该如何解决这个问题？

我使用的代码与文档中的代码非常相似：

<div data-role="tabs" id="tabs">
    <div data-role="navbar">
        <ul>
            <li><a href="#one" data-ajax="false">one</a></li>
            <li><a href="#two" data-ajax="false">two</a></li>
        </ul>
    </div>

    <div id="one" class="ui-body-d ui-content">
        <h1>My results as an ordered list</h1>
        <ol>
            <li>Coffee</li>
            <li>Milk</li>
        </ol>
    </div>

    <div id="two">
        <h1>My results as an unordered list</h1>
        <ul>
            <li>Coffee</li>
            <li>Milk</li>
        </ul>
    </div>
</div>

Answer 1

我假设您可以使用锚点调整请求网址

正如Rob在评论中建议的那样，你可以选择位置哈希来解决问题：

为每个要跟踪具有唯一哈希标记的链接的选项卡设置，并使其与目标div ID保持关联。

<a href="#one" data-ajax="false">one</a> //one
<a href="#two" data-ajax="false">two</a> //two

//corresponds to

<div id="one">...</div>
<div id="two">...</div>

然后阅读哈希并采取适当的行动：

 function uri_get() {
        return window.location.hash.slice || "#default";
    }

 $(document).ready(function () {
     var $uri;

     uri = $(uri_get());  //$uri now contains your tab element.  

  });

如何在JQuery Mobile中保持页面刷新时选定的选项卡？

1 个答案: