Twitter Bootstrap 3 保持 Tab 刷新答案

【问题标题】：Twitter Bootstrap 3 keep Tab on refreshTwitter Bootstrap 3 保持 Tab 刷新
【发布时间】：2015-12-04 09:04:31
【问题描述】：

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

【问题讨论】：

你在哪里#Tabcont元素？
这是和更早的测试，与这里无关，我应该删除它。对不起

标签： javascript html twitter-bootstrap

【解决方案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') 方法，您可以按照以下方式进行操作，但您需要再次从之前的 default element 中删除 active class

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

UPDATED DEMO

【讨论】：

您的解决方案对我来说似乎很好。但是当我暗示它时它仍然不起作用。我应该将它粘贴到代码中的哪个位置？是不是因为他没有在重新加载时调用它？抱歉，我的 JS 不太好。
基本上看你的尝试应该可以工作。在我给你确切的解决方案之前，Bdw 检查控制台错误。
我检查了一切。没有错误。有没有可能是一个 php 文件？它首先检查会话（如果用户登录或未登录），然后是 html 标签等以及带有所有指向 css、js 的链接的标题，最后是这个 js 脚本。这是上面的整个部分：pastebin.com/WzwEfwP0
如果可能的话，把你的script标签放在</body>之前，然后是js code
您是否尝试在body 结束之前保留scripts 而不是在head 内部？

【解决方案2】：

你可以改变哈希：

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

网址将被更新，当点击刷新按钮时，它应该会打开正确的选项卡。

【讨论】：

这种方法仍然无法正常工作：/我不知道是否有其他东西搞砸了这一切，但我在互联网上找到了很多解决方案，但都没有奏效。跨度>
我在我打开的项目中的一个页面上尝试过它，它对我来说运行良好，控制台上是否有任何错误或您可能编写的任何其他代码可能会导致问题？它可以解释为什么到目前为止你所尝试的一切都没有奏效。 jQuery 和 bootstrap.js 肯定包含在页面等中？
JQuery 和 Bootstrap 包括在内。我不知道其他代码是否与这部分冲突，但我会再次忽略整个页面。感谢您的建议（没有控制台错误）。
我需要添加这个位所以刷新它会加载散列标签：// on load of the page: switch to the currently selected tabvar hash = window.location.hash;$('#config-tabs a[href="' + hash + '"]').tab('show');

【解决方案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>

【讨论】：