如何在页面重新加载后使用twitter bootstrap保持当前选项卡处于活动状态?

时间:2012-05-09 20:13:48

标签: javascript jquery twitter-bootstrap

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

这是怎么做到的?

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

<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>

17 个答案:

答案 0 :(得分:134)

您必须使用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');
    }
});

答案 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');
  }
});

答案 2 :(得分:18)

所有其他答案都是正确的。此答案将考虑到同一页面上可能有多个ul.nav.nav-pillsul.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。谢谢Alain

答案 3 :(得分: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();
  }
});

答案 4 :(得分: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>

答案 5 :(得分:6)

防止第一个选项卡上的页面闪烁,然后阻止cookie保存的选项卡(当您在第一个选项卡中默认确定“活动”类时会发生这种情况)

删除标签和窗格的“活动”类,如:

<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');
        }
    });

答案 6 :(得分: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_klantenlastTab_bestellingen等,两个不同的网页klantenbestellingen都在标签中显示数据。

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

答案 7 :(得分: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');
  }
});

答案 8 :(得分:3)

想要褪色效果? @ Oktav代码的更新版本:

  1. For Bootstrap 3
  2. 在li和tab的div上设置类以使淡入淡出正常工作。请注意,所有内容div都需要class="tab-pane fade"
  3. 代码:     

    // 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");
        }
      });
    });
    

答案 9 :(得分:1)

我建议进行以下更改

  1. 使用amplify.store之类的插件提供 具有内置回退的crossbrowser / crossplatform localstorage API。

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

  3. 使用唯一标识符(url ??)在多个页面中保存和恢复上次使用的标签。


  4. $(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');
      }
    });
    

答案 10 :(得分:1)

没有本地存储的简单解决方案:

$(".nav-tabs a").on("click", function() {
    location.hash = $(this).attr("href");
});

答案 11 :(得分:0)

如果您想在第一次进入页面时显示第一个标签,请使用以下代码:

&#13;
&#13;
    <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>
&#13;
&#13;
&#13;

答案 12 :(得分:0)

我制作的代码片段与 Bootstrap 3 jQuery 以及一起使用,其中不同的网址包含不同的标签它不支持每页多个标签,但如果您需要该功能,则应该很容易修改。

/**
 * 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();

    }

});

答案 13 :(得分:0)

$(document).ready(function(){

cellForRow(at:)

});

答案 14 :(得分: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>

答案 15 :(得分:0)

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

  function checkbox2_Callback(hObject, eventdata, handles)
  if get(handles.checkbox2,'Value')
    hold( handles.axes1, 'on' )
    handles.plotCDS2 = plot(dataS2(:,1),NormCdS2(:,1),'LineWidth',2,'Color', [1 0 0],'parent',handles.axes1);
    hold( handles.axes2, 'on' )
    handles.plotHTS2 = plot(dataS2(:,1),dataS2(:,3),'LineWidth',2,'Color', [1 0 0],'parent',handles.axes2);   
    guidata(hObject,handles);  % do this to save the updated handles structure
 else
     if ~isempty(handles.plotCDS2);
         delete(handles.plotCDS2); 
        ~isempty(handles.plotHTS2);  
         delete(handles.plotHTS2);
     end       
end 

答案 16 :(得分: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>
}