Question

我有nav-tabs：

<ul class="nav nav-tabs">
    <li class=""><a href="#not-permitted" data-toggle="tab" aria-expanded="false"> 승인 대기 </a></li>
    <li><a href="#ready-to-pay" data-toggle="tab" aria-expanded="true"> 결제 대기 </a></li>
    <li><a href="#paid" data-toggle="tab"> 결제 완료 </a></li>
    <li><a href="#canceled" data-toggle="tab"> 취소 완료 </a></li>
</ul>

并且每个标签都有分页。

这是我的jQuery代码，用于在分页时记住最后一个标签：

test.js

$(document).ready(function() {
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        // Execution1
        localStorage.setItem('lastTab', $(this).attr('href'));
    });

    // Execution2
    var lastTab = localStorage.getItem('lastTab');
    if (lastTab) {
        $('[href="' + lastTab + '"]').tab('show');
    } else {
        $('[href="#not-permitted"]').tab('show');
    }
});

这很糟糕，因为Execution2部分应该在Execution1执行后执行，但由于事件函数是异步的，所以它不会有效。

所以我改变了这样的代码：

$(document).ready(function() {
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        localStorage.setItem('lastTab', $(this).attr('href'));
        // go to the latest tab, if it exists:
        var lastTab = localStorage.getItem('lastTab');
        if (lastTab) {
            $('[href="' + lastTab + '"]').tab('show');
        } else {
            $('[href="#not-permitted"]').tab('show');
        }
    });
});

看起来不错，但在加载（或刷新）页面时它没有显示任何标签，因为首次加载页面时不会发生shown.bs.tab事件。

你可以给我一些想法吗？

修改

$(document).ready(function() {
    $('a[data-toggle="tab"]').trigger("click") 
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        localStorage.setItem('lastTab', $(this).attr('href'));
        // go to the latest tab, if it exists:
        var lastTab = localStorage.getItem('lastTab');
        if (lastTab) {
            $('[href="' + lastTab + '"]').tab('show');
        } else {
            $('[href="#not-permitted"]').tab('show');
        }
    });
});

也不起作用......它一个接一个地点击所有标签......连续......

jQuery：在分页时记住数据切换选项卡

0 个答案: