Bootstrap Navtab默认选项卡显示

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> 

在我的页面图像中创建显示的导航标签。这里的问题是默认导航选项卡是成员在线。即第一个。页面刷新时，例如如果我接受和新的联系请求，它将带我到第一个选项卡。我想在页面刷新后留在当前页面。如何存储当前导航选项卡的状态，该选项卡在显示时显示并在刷新时显示。我相信它可以由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>

Answer 2

试试这个，

<script>
$(document).ready(function(e) {

if(location.hash ) {    
//  show the last selected tab      
    $('#myTab a[href=' + location.hash + ']').tab('show');      
}

//save the selected tab
$(document.body).on("click", "#myTab a[href]", function(ev) {       
    location.hash = this.getAttribute("href");          
});
});
</script>

希望这会有用......