Question

Tab容器的多个问题和解决方案应该保留最后选择的选项卡，而不是刷新整个页面并再次从第一个选项卡开始。但我的解决方案不适用于我的页面。有人可以帮我吗？这是我的JS

<script type="javascript">
$(function() { 
    // for bootstrap 3 use 'shown.bs.tab', for bootstrap 2 use 'shown' in the next line
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        // save the latest tab; use cookies if you like 'em better:
        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');
    }
});
</script>

那是我的HTML：

 <ul  id="myTab" class="nav nav-tabs" role="tablist" style="background-color: #3E98E4;">
   <li role="presentation"  class="active"><a href="#kunver" aria-controls="kunver" role="tab" data-toggle="tab" style="  border: 1px solid;
  margin-top: 10%;
  color: #fff;
  background-color: #3C97E4;">Kunden</a></li>

    <li role="presentation"><a href="#erter" aria-controls="erter" role="tab" data-toggle="tab" style="  border: 1px solid;
  margin-top: 10%;
  color: #fff;
  background-color: #3C97E4;">Termine</a></li>

    <a href="logout.php" ><button style="margin-top: 1%;margin-left:1%;
  background-color: #3E98E4;
  color: #fff;
  border-color: #fff;" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right"><span class="glyphicon glyphicon-log-out"></span> Logout</button></a>
  </ul>

Answer 1

我对您的代码进行了一些修改，如下所示：

var lastTab = localStorage.getItem('lastTab');
if (lastTab) {
   $('li.active,.tab-pane.active').removeClass('active');
   //remove active class from both li and tabpane since it will be by default added at page load
   $('[href="' + lastTab + '"]').closest('li').addClass('active');
   //add active to lastTab's parent li using closest
   $(lastTab).addClass('active');
   //also add active to lastTab
}

<强> DEMO

<强>更新

使用原生.tab('show')方法，您可以按照以下方式执行此操作，但您需要再次删除之前active class

中的default element

var lastTab = localStorage.getItem('lastTab');
if (lastTab) {
  $('li.active,.tab-pane.active').removeClass('active');
  $('[href="' + lastTab + '"]').tab('show');
}

<强> UPDATED DEMO

Answer 2

你可以改变哈希：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    window.location.hash = $(this).attr('href');
});

将更新网址，点击刷新按钮时，应打开正确的标签。

Answer 3

如果页面中有多个标签，则可以使用以下代码

<script type="text/javascript">
$(document).ready(function(){
    $('#myTab').on('show.bs.tab', function(e) {
        localStorage.setItem('activeTab', $(e.target).attr('href'));
    });
    var activeTab = localStorage.getItem('activeTab');
    if(activeTab){
        $('#myTab a[href="' + activeTab + '"]').tab('show');        
    }
    $('#charts-tab').on('show.bs.tab', function(e) {
        localStorage.setItem('chartsactiveTab', $(e.target).attr('href'));
    });
    var chartsactiveTab = localStorage.getItem('chartsactiveTab');
    if(chartsactiveTab){
        $('#charts-tab a[href="' + chartsactiveTab + '"]').tab('show');        
    }     
});
</script>

Twitter Bootstrap 3保持Tab状态刷新

3 个答案: