Question

我在我的网页上使用jQuery标签，但希望它记住最后使用的标签，在表格汇总后或用户点击链接然后返回标签页。我怎么能记住刷新页面后使用的最后一个标签，或者导航到另一个链接。到目前为止，我没有找到任何关于网络工作的例子，到目前为止我有这个代码：

{{1}}

Answer 1

CONCEPT：将数据存储在cookie中，并在页面加载时检索它。

document.cookie = "tab=foo";

完整的实施示例：

http://jsfiddle.net/sst9x2pd/

HTML：

<ul class="nav nav-tabs">
    <li><a class="addressClick" href="#aaa" data-toggle="tab">AAA</a></li>
    <li><a class="addressClick" href="#bbb" data-toggle="tab">BBB</a></li>
    <li><a class="addressClick" href="#ccc" data-toggle="tab">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
    <div class="tab-pane" id="aaa">...Content...</div>
    <div class="tab-pane" id="bbb">...Content...</div>
    <div class="tab-pane" id="ccc">...Content...</div>
</div>

JS：

 $('.nav-tabs a[href="'+getCookie('lastTab')+'"]').tab('show');


$(".addressClick").click(function () {
        var addressValue = $(this).attr("href");
    console.log(addressValue);
        setCookie('lastTab', addressValue, 100);
    });
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length,c.length);
        }
    }
    return "";
}

Answer 2

试试这个

$(function() {
            $( ".tab-base" ).tabs({
              activate:function(event,ui){

                localStorage.setItem("lastTab",ui.newTab.index() );
              },
              active: localStorage.getItem("lastTab") || 0
            });
         });

您可以通过选择标签查看此处并刷新页面。 https://jsbin.com/

如何记住提交/刷新后使用的最后一个标签？

2 个答案: