javascript - Bootstrap 导航栏默认选项卡显示

Question

我的导航选项卡有以下代码

<ul id="myTab" class="nav nav-tabs nav-tabs1" role="tablist">
    <li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Members Online </a></li>
    <?php if(count($new_contacts)>0){?>
    <li role="presentation"><a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">New Contacts (<?php echo count($new_contacts)?>)</a></li>
    <?php }else{?>
    <li role="presentation"><a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">New Contacts</a></li>
    <?php }?>
    <li role="presentation"><a href="#profile1" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Accepted Contacts</a></li>
    <li role="presentation"><a href="#profile2" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Interests Sent</a></li>
    <li role="presentation"><a href="#profile3" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Recently Viewed</a></li>
</ul> 

这会在我的页面图像中创建显示的导航选项卡。这里的问题是默认的导航选项卡是“成员(member)在线”。即第一个。当页面刷新时，例如如果我接受新的联系请求，我会转到第一个选项卡。我想在页面刷新后留在当前页面。如何存储当前显示的导航选项卡的状态并在刷新时显示它。我相信Jquery可以做到。

谁有解决办法吗？

Answer 1

将上次访问的选项卡保存在本地存储中。使用以下 jquery 代码来实现您的目标:

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

            var lastTab = localStorage.getItem('lastTab');
            if (lastTab) {
                $('[href="' + lastTab + '"]').tab('show');
            }
        })
    </script>