重新加载页面后，如何使用Twitter Bootstrap使当前选项卡保持活动状态？

87

我目前在Twitter Bootstrap中使用标签，并希望在用户发布数据并重新加载页面后选择相同的标签。

怎么做？

我目前对inti标签的调用如下所示：

<script type="text/javascript">

$(document).ready(function() {

    $('#profileTabs a:first').tab('show');
});
</script>

我的标签：

<ul id="profileTabs" class="nav nav-tabs">
    <li class="active"><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#about" data-toggle="tab">About Me</a></li>
    <li><a href="#match" data-toggle="tab">My Match</a></li>
</ul>
javascript  jquery  twitter-bootstrap 
— 保罗
source
1
— koppor 2014年
— Tim Abell，2014年

Answers:

138

您必须使用localStorage或cookie来管理它。这是一个快速而肮脏的解决方案，可以进行很大的改进，但可能会为您提供一个起点：

$(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');
    }
});
— 加百利
source
不错，您的解决方案可能会添加到joomla 30核心中，joomlacode.org / gf / project
— Benn
12
更好地使用它，$(this).attr('href')而不是$(e.target).attr('id')给您没有完整网址的哈希。您还必须将而不是应用于.tab()标签。另请参阅：stackoverflow.com/questions/16808205/…–data-toggle="tab"$('#'+lastTab)
— 巴斯·乔布森
3
在Bootstrap 3中，方法shown似乎稍有 更改，但似乎不再起作用，必须将其更改为shown.bs.tab。注意：我了解javascript等相关知识，也了解经济学...因此，任何知道最新情况的人都可以随时纠正我。
— Chaz 2013年
10
修改后可以使用多个选项卡控件（和Bootstrap 3）：gist.github.com/brendanmckenzie/8f8008d3d51c07b2700f
— Brendan
1
它会转到第一个选项卡，刷新后返回到当前选项卡
— Raviteja'1
23

使用Cookie可以使其正常工作，还可以从其他任何选项卡和选项卡窗格中删除“活动”类...，并将“活动”类添加到当前选项卡和选项卡窗格中。

我敢肯定有更好的方法可以做到这一点，但这在这种情况下似乎可行。

需要jQuery cookie插件。

$(function() { 
  $('a[data-toggle="tab"]').on('shown', function(e){
    //save the latest tab using a cookie:
    $.cookie('last_tab', $(e.target).attr('href'));
  });

  //activate latest tab, if it exists:
  var lastTab = $.cookie('last_tab');
  if (lastTab) {
      $('ul.nav-tabs').children().removeClass('active');
      $('a[href='+ lastTab +']').parents('li:first').addClass('active');
      $('div.tab-content').children().removeClass('active');
      $(lastTab).addClass('active');
  }
});
— 里斯洛克
source
即使看起来合理，我也无法使localStorage解决方案正常工作。开箱即用的解决方案和$ .cookie插件非常方便。
— Michael J. Calkins
适用的.tab（）与数据肘节=“标签”，而不是删除和添加的类也见标记：stackoverflow.com/questions/16808205/...
— 贝斯Jobsen
对于我的布局，由于我在div中使用了“ fade in active”，因此需要更改最后两行以添加或删除“ inactive”。
— Obromios
18

所有其他答案都是正确的。该答案将考虑到一个事实，即一个页面可能有多个页面ul.nav.nav-pills或ul.nav.nav-tabs同一页面。在这种情况下，先前的答案将失败。

仍在使用，localStorage但使用字符串化JSON作为值。这是代码：

$(function() {
  var json, tabsState;
  $('a[data-toggle="pill"], a[data-toggle="tab"]').on('shown', function(e) {
    var href, json, parentId, tabsState;

    tabsState = localStorage.getItem("tabs-state");
    json = JSON.parse(tabsState || "{}");
    parentId = $(e.target).parents("ul.nav.nav-pills, ul.nav.nav-tabs").attr("id");
    href = $(e.target).attr('href');
    json[parentId] = href;

    return localStorage.setItem("tabs-state", JSON.stringify(json));
  });

  tabsState = localStorage.getItem("tabs-state");
  json = JSON.parse(tabsState || "{}");

  $.each(json, function(containerId, href) {
    return $("#" + containerId + " a[href=" + href + "]").tab('show');
  });

  $("ul.nav.nav-pills, ul.nav.nav-tabs").each(function() {
    var $this = $(this);
    if (!json[$this.attr("id")]) {
      return $this.find("a[data-toggle=tab]:first, a[data-toggle=pill]:first").tab("show");
    }
  });
});

此位可以在所有页面的整个应用程序中使用，并且适用于制表符和药丸。另外，请确保默认情况下标签或药丸未处于活动状态，否则在页面加载时会看到闪烁效果。

重要提示：确保父母ul有一个ID。谢谢阿兰

— 奥克塔夫
source
2
同样，对于BS3，将“ shown”事件替换为“ shown.bs.tab”
— Alain
18

为了获得最佳选择，请使用以下技术：

$(function() { 
  //for bootstrap 3 use 'shown.bs.tab' instead of 'shown' in the next line
  $('a[data-toggle="tab"]').on('click', function (e) {
    //save the latest tab; use cookies if you like 'em better:
    localStorage.setItem('lastTab', $(e.target).attr('href'));
  });

  //go to the latest tab, if it exists:
  var lastTab = localStorage.getItem('lastTab');

  if (lastTab) {
    $('a[href="'+lastTab+'"]').click();
  }
});
— 威美欧
source
12

我更喜欢将选定的选项卡存储在窗口的哈希值中。这样还可以将链接发送给同事，然后再看到“同一”页面。技巧是在选择另一个选项卡时更改位置的哈希。如果您已经在页面中使用＃，则可能必须拆分哈希标签。在我的应用程序中，我使用“：”作为哈希值分隔符。

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#messages">Messages</a></li>
    <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">home</div>
    <div class="tab-pane" id="profile">profile</div>
    <div class="tab-pane" id="messages">messages</div>
    <div class="tab-pane" id="settings">settings</div>
</div>

<script>
    $('#myTab a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
    });

    // store the currently selected tab in the hash value
    $("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
        var id = $(e.target).attr("href").substr(1);
        window.location.hash = id;
    });

    // on load of the page: switch to the currently selected tab
    var hash = window.location.hash;
    $('#myTab a[href="' + hash + '"]').tab('show');
</script>
— Koppor
source
感谢您的回答。它对我来说很好用，我不想仅仅为了这个问题而处理cookie，所以很棒。
— nico008
@koppor，这不起作用，存在回发事件。我添加了linkbutton <asp:LinkButton CssClass="form-search" ID="LinkButtonSearch" runat="server">Search</asp:LinkButton> ，单击按钮后，它是默认选项卡，而不是当前选项卡变为活动状态。我该如何解决？
— Djama 2014年
6

为了防止页面在第一个选项卡上然后由Cookie保存的选项卡上闪烁（在默认情况下，当您在第一个TAB中将类确定为“活动”时，会发生这种情况）

删除选项卡和窗格的“活动”类，例如： 

<ul class="nav nav-tabs">
<div id="p1" class="tab-pane">

将脚本放在下面以将第一个标签设置为默认标签（需要jQuery Cookie插件）

    $(function() { 
        $('a[data-toggle="tab"]').on('shown', function(e){
            //save the latest tab using a cookie:
            $.cookie('last_tab', $(e.target).attr('href'));
        });
        //activate latest tab, if it exists:
        var lastTab = $.cookie('last_tab');
        if (lastTab) {
            $('a[href=' + lastTab + ']').tab('show');
        }
        else
        {
            // Set the first tab if cookie do not exist
            $('a[data-toggle="tab"]:first').tab('show');
        }
    });
— 杰斐逊·特诺里奥
source
3

想要褪色效果？@Oktav的代码的更新版本：

  1. 对于Bootstrap 3
  2. 在li和tab的div上设置类，以使衰落正常工作。请注意，所有内容div需要class="tab-pane fade"

码： 

// See http://stackoverflow.com/a/16984739/64904
// Updated by Larry to setup for fading
$(function() {
  var json, tabsState;
  $('a[data-toggle="pill"], a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    var href, json, parentId, tabsState;
    tabsState = localStorage.getItem("tabs-state");
    json = JSON.parse(tabsState || "{}");
    parentId = $(e.target).parents("ul.nav.nav-pills, ul.nav.nav-tabs").attr("id");
    href = $(e.target).attr('href');
    json[parentId] = href;
    return localStorage.setItem("tabs-state", JSON.stringify(json));
  });
  tabsState = localStorage.getItem("tabs-state");
  json = JSON.parse(tabsState || "{}");
  $.each(json, function(containerId, href) {
    var a_el = $("#" + containerId + " a[href=" + href + "]");
    $(a_el).parent().addClass("active");
    $(href).addClass("active in");
    return $(a_el).tab('show');
  });
  $("ul.nav.nav-pills, ul.nav.nav-tabs").each(function() {
    var $this = $(this);
    if (!json[$this.attr("id")]) {
      var a_el = $this.find("a[data-toggle=tab]:first, a[data-toggle=pill]:first"),
          href = $(a_el).attr('href');
      $(a_el).parent().addClass("active");
      $(href).addClass("active in");
      return $(a_el).tab("show");
    }
  });
});
— 拉里·K
source
3

我在多个页面中都有选项卡，而localStorage也使前一页中的lastTab保持不变，因此对于下一页，由于它在存储中具有上一页的lastTab，因此在这里找不到任何匹配的选项卡，因此没有显示任何内容。我以这种方式修改了它。

$(document).ready(function(){
    //console.log($('a[data-toggle="tab"]:first').tab('show'))
    $('a[data-toggle="tab"]').on('shown.bs.tab', function () {
        //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 ($('a[href=' + lastTab + ']').length > 0) {
        $('a[href=' + lastTab + ']').tab('show');
    }
    else
    {
        // Set the first tab if cookie do not exist
        $('a[data-toggle="tab"]:first').tab('show');
    }
})

编辑：我注意到我必须lastTab为不同的页面使用不同的变量名，否则，它们将始终相互覆盖。例如lastTab_klanten，lastTab_bestellingen等等，用于两个不同的页面，klanten并且bestellingen两个页面的数据均显示在标签中。

$(document).ready(function(){
    //console.log($('a[data-toggle="tab"]:first').tab('show'))
    $('a[data-toggle="tab"]').on('shown.bs.tab', function () {
        //save the latest tab; use cookies if you like 'em better:
        localStorage.setItem('lastTab_klanten', $(this).attr('href'));
    });

    //go to the latest tab, if it exists:
    var lastTab_klanten = localStorage.getItem('lastTab_klanten');
    if (lastTab_klanten) {
        $('a[href=' + lastTab_klanten + ']').tab('show');
    }
    else
    {
        // Set the first tab if cookie do not exist
        $('a[data-toggle="tab"]:first').tab('show');
    }
})
— 戈哈尔·沙希
source
3

我使它可以与@dgabriel类似的解决方案一起使用，在这种情况下，链接<a>不需要id，它根据位置识别当前标签。

$(function() { 
  $('a[data-toggle="tab"]').on('shown', function (e) {
    var indexTab = $('a[data-toggle="tab"]').index($(this)); // this: current tab anchor
    localStorage.setItem('lastVisitedTabIndex', indexTab);
  });

  //go to the latest tab, if it exists:
  var lastIndexTab  = localStorage.getItem('lastVisitedTabIndex');
  if (lastIndexTab) {
      $('a[data-toggle="tab"]:eq(' + lastIndexTab + ')').tab('show');
  }
});
— 杰德
source
我认为您的代码在显示getItem之前是错误的，也解决了两次声明indexTab的问题。
— 约翰·木兰2014年
@JohnMagnolia我indexTab两次都命名了，但这是一个区别。指数。所以我叫第二个lastIndexTab。关于shown，这是一个事件，因此它不会在您打开选项卡之前触发，因此，是否为before并不重要getItem。
— 贾德2015年
1

我建议进行以下更改

  1. 使用amplify.store之类的插件，该插件提供具有内置后备功能的跨浏览器/跨平台本地存储API。

  2. 以需要保存的标签为目标，$('#div a[data-toggle="tab"]')以便将该功能扩展到同一页面上存在的多个标签容器。

  3. 使用唯一的标识符(url ??)来保存和恢复多个页面上最后使用的选项卡。

$(function() { 
  $('#div a[data-toggle="tab"]').on('shown', function (e) {
    amplify.store(window.location.hostname+'last_used_tab', $(this).attr('href'));
  });

  var lastTab = amplify.store(window.location.hostname+'last_used_tab');
  if (lastTab) {
    $("#div a[href="+ lastTab +"]").tab('show');
  }
});
— 桑迪普
source
0

服务器端方法。确保所有html元素都具有class =“”，以防未指定，否则您将需要处理null。

    private void ActiveTab(HtmlGenericControl activeContent, HtmlGenericControl activeTabStrip)
    {
        if (activeContent != null && activeTabStrip != null)
        {
            // Remove active from content
            Content1.Attributes["class"] = Content1.Attributes["class"].Replace("active", "");
            Content2.Attributes["class"] = Content2.Attributes["class"].Replace("active", "");
            Content3.Attributes["class"] = Content3.Attributes["class"].Replace("active", "");

            // Remove active from tab strip
            tabStrip1.Attributes["class"] = tabStrip1.Attributes["class"].Replace("active", "");
            tabStrip2.Attributes["class"] = tabStrip2.Attributes["class"].Replace("active", "");
            tabStrip3.Attributes["class"] = tabStrip3.Attributes["class"].Replace("active", "");

            // Set only active
            activeContent.Attributes["class"] = activeContent.Attributes["class"] + " active";
            activeTabStrip.Attributes["class"] = activeTabStrip.Attributes["class"] + " active";
        }
    }
— 迈克尔·戈德史密特
source
0

如果要在第一次进入页面时显示第一个标签，请使用以下代码：

    <script type="text/javascript">
        function invokeMeMaster() {
        var chkPostBack = '<%= Page.IsPostBack ? "true" : "false" %>';
            if (chkPostBack == 'false') {
                $(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'));
                    });

                });
            }
            else {
                $(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');
                    }

                });

            }
        }
        window.onload = function() { invokeMeMaster(); };

    </script>
展开摘要

— 鲁本
source
0

这是我制作的一段代码，可与Bootstrap 3和jQuery配合使用，并与包含不同选项卡的不同URL一起使用。虽然它不支持每页多个选项卡，但是如果需要该功能，则应该轻松进行修改。

/**
 * Handles 'Bootstrap' package.
 *
 * @namespace bootstrap_
 */

/**
 * @var {String}
 */
var bootstrap_uri_to_tab_key = 'bootstrap_uri_to_tab';

/**
 * @return {String}
 */
function bootstrap_get_uri()
{
    return window.location.href;
}

/**
 * @return {Object}
 */
function bootstrap_load_tab_data()
{
    var uriToTab = localStorage.getItem(bootstrap_uri_to_tab_key);
    if (uriToTab) {
    try {
        uriToTab = JSON.parse(uriToTab);
        if (typeof uriToTab != 'object') {
        uriToTab = {};
        }
    } catch (err) {
        uriToTab = {};
    }
    } else {
    uriToTab = {};
    }
    return uriToTab;
}

/**
 * @param {Object} data
 */
function bootstrap_save_tab_data(data)
{
    localStorage.setItem(bootstrap_uri_to_tab_key, JSON.stringify(data));
}

/**
 * @param {String} href
 */
function bootstrap_save_tab(href)
{
    var uri = bootstrap_get_uri();
    var uriToTab = bootstrap_load_tab_data();
    uriToTab[uri] = href;
    bootstrap_save_tab_data(uriToTab);
}

/**
 *
 */
function bootstrap_restore_tab()
{
    var uri = bootstrap_get_uri();
    var uriToTab = bootstrap_load_tab_data();
    if (uriToTab.hasOwnProperty(uri) &&
    $('[href="' + uriToTab[uri] + '"]').length) {
    } else {
    uriToTab[uri] = $('a[data-toggle="tab"]:first').attr('href');
    }
    if (uriToTab[uri]) {
        $('[href="' + uriToTab[uri] + '"]').tab('show');
    }
}

$(document).ready(function() {

    if ($('.nav-tabs').length) {

    // 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) {
        bootstrap_save_tab($(this).attr('href'));
    });
    bootstrap_restore_tab();

    }

});
— 乔汉森
source
0

$（document）.ready（function（）{

        if (JSON.parse(localStorage.getItem('currentClass')) == "active")
        {
            jQuery('#supporttbl').addClass('active')
            $('.sub-menu').css({ "display": "block" });
        }

        $("#supporttbl").click(function () { 
            var currentClass;
            if ($(this).attr('class')== "active") { 

                currentClass = $(this).attr('class');

                localStorage.setItem('currentClass', JSON.stringify(currentClass));
                console.log(JSON.parse(localStorage.getItem('currentClass')));

                jQuery('#supporttbl').addClass('active')
                $('.sub-menu').css({ "display": "block" });

            } else {

                currentClass = "Null"; 

                localStorage.setItem('currentClass', JSON.stringify(currentClass));
                console.log(JSON.parse(localStorage.getItem('currentClass')));

                jQuery('#supporttbl').removeClass('active')
                $('.sub-menu').css({ "display": "none" });

            }  
        });

}）;

— 迪内什·帕蒂达尔
source
0

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

<script type="text/javascript">
$(document).ready(function(){
    $('#profileTabs').on('show.bs.tab', function(e) {
        localStorage.setItem('profileactiveTab', $(e.target).attr('href'));
    });
    var profileactiveTab = localStorage.getItem('profileactiveTab');
    if(profileactiveTab){
        $('#profileTabs a[href="' + profileactiveTab + '"]').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>
— 穆罕默德·萨米（Mohamed Sami）
source
0

这将刷新选项卡，但仅在加载控制器中的所有内容之后。

// >= angular 1.6 angular.element(function () {
angular.element(document).ready(function () {
    //Here your view content is fully loaded !!
    $('li[href="' + location.hash + '"] a').tab('show');
});
— PHP大师
source
0

我在MVC中使用它：

  • 模型中有一个SelectedTab整数字段，用于将值发送到POST方法

JavaScript部分：

<script type="text/javascript">
    $(document).ready(function () {
       var index = $("input#SelectedTab").val();
       $("#tabstrip > ul li:eq(" + index + ")").addClass("k-state-active");

       $("#tabstrip").kendoTabStrip();
    });
    function setTab(index) {
      $("input#SelectedTab").val(index)
    }
</script>

HTML部分：

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.HiddenFor(model => model.SelectedTab)
<div id="tabstrip">
    <ul>
        <li onclick="setTab(0)">Content 0</li>
        <li onclick="setTab(1)">Content 1</li>
        <li onclick="setTab(2)">Content 2</li>
        <li onclick="setTab(3)">Content 3</li>
        <li onclick="setTab(4)">Content 4</li>
    </ul>
    <div>

    </div>
    <div>

    </div>
    <div>

    </div>
    <div>

    </div>
    <div>

    </div>
</div>
<div class="content">
    <button type="submit" name="save" class="btn bg-blue">Save</button>
</div>
}
— 卡洛斯·托莱多
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.