使用 localstorage 记住上次选择的选项卡

Question

在 bootstrap 4 网站中，我有以下选项卡：

<ul id="tabsJustified" class="nav nav-tabs">
    <li class="nav-item"><a href="#tab1" data-target="#tab1" data-toggle="tab" class="nav-link active">Personal details</a></li>
    <li class="nav-item"><a href="#tab2" data-target="#tab2" data-toggle="tab" class="nav-link">Medical conditions</a></li>
    <li class="nav-item"><a href="#tab3" data-target="#tab3" data-toggle="tab" class="nav-link">Medication</a></li>
    <li class="nav-item"><a href="#tab4" data-target="#tab4" data-toggle="tab" class="nav-link">Care needs</a></li>
    <li class="nav-item"><a href="#tab4" data-target="#tab5" data-toggle="tab" class="nav-link">Care environment</a></li>
    <li class="nav-item"><a href="#tab3" data-target="#tab6" data-toggle="tab" class="nav-link"><i class="fa fa-plus-circle mr-2"></i>Add a second client</a></li>
</ul>

我想要的是，记住上次选择的选项卡，并在页面重新加载时转到该选项卡。

使用此代码，它仅适用于第 1、第 2 和第 6 个选项卡。

$(function() { 
    $('a[data-toggle="tab"]').on('shown.bs.tab', function () {
        localStorage.setItem('lastTab', $(this).attr('href'));
    });
    var lastTab = localStorage.getItem('lastTab');
    if (lastTab) {
        $('[href="' + lastTab + '"]').tab('show');
        console.log(lastTab);
    }
});

当我单击第 4 个选项卡时，重新加载后，第 5 个选项卡将处于活动状态。 console.log 行返回正确的选项卡 ID 或 href，我检查过了。

Answer 1

嗯，检查你的 href 值，你的增量“1、2、3、4、4、3”不正确，因为你有两次“4”，这就是为什么选择第五个。

只需将其更改为“1、2、3、4、5、6”即可

使用 localstorage 记住上次选择的选项卡

Remember the last selected tab with localstorage

javascript

jquery

local-storage