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

sdfgg45 发表于 Dev

sdfgg45

我在网页上使用jQuery选项卡，但希望它记住上一次使用的选项卡，表单汇总后或用户单击链接然后返回到选项卡页面时。我如何记住刷新页面或导航到另一个链接后使用的最后一个选项卡。到目前为止，我在网络上找不到任何示例，到目前为止，我已经有了以下代码：

<div id="content-container">
    <div id="page-content"> 
        <div class="row">   
            <div class="col-md-12">
                <div class="tab-base">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a data-toggle="tab" href="#demo-lft-tab-1">Tab1</a>
                        </li>
                        <li>
                            <a data-toggle="tab" href="#demo-lft-tab-2">Tab2</a>
                        </li>
                        <li>
                            <a data-toggle="tab" href="#demo-lft-tab-3">Tab3</a>
                        </li>
                        <li>
                            <a data-toggle="tab" href="#demo-lft-tab-4">Tab4</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div id="demo-lft-tab-1" class="tab-pane fade active in"></div>
                        <div id="demo-lft-tab-2" class="tab-pane fade"></div>
                        <div id="demo-lft-tab-3" class="tab-pane fade"></div>
                        <div id="demo-lft-tab-4" class="tab-pane fade"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>          
</div>          
<script>
    var lastTab = localStorage.getItem('lastTab');
    if (!lastTab) {
        lastTab = 0;
    }
    $(".tab-base").tabs({
        activate: function(event, ui) {
            //if another tab is activate, save it's index to the localStorage
            localStorage.setItem('lastTab', ui.newTab.index());
        },
        //set the corresponding tab to active
        active: lastTab
    });
</script>

血压

试试这个

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

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。