Question

是否可以在页面刷新时在嵌套选项卡中记住当前选项卡，无论是父选项还是子选项？它基本上是水平标签内的垂直标签，如下面的HTML代码所示。它目前工作正常，但令人讨厌的是，如果页面刷新，它只会跳回Tab One。

我有一小段JS，可以在页面刷新时记住当前查看的选项卡，但这只有在选项卡没有嵌套在选项卡内时才有效。我在HTML之后将其包含在此作为参考。

我希望能够做的是返回子选项卡，如果用户刷新页面，请在选项卡二中找到子菜单项3。

<div class="row">
  <div class="col-lg-12">

            <ul id="userTab" class="nav nav-tabs">
              <li class="active"><a href="#tabone" data-toggle="tab">Tab One</a> </li>
              <li><a href="#tabtwo" data-toggle="tab">Tab Two</a> </li>
            </ul>

            <div id="userTabContent" class="tab-content">

                <div class="tab-pane active" id="tabone">
                    <div class="row">
                      <h3>
                      This is the content for tab one
                      <h3>
                    </div>
                </div> <!-- tabone -->

                <div class="tab-pane" id="tabtwo">
                    <div class="row">
                          <div class="col-sm-2">
                            <ul id="subtabmenu" class="nav nav-pills nav-stacked">
                              <li class="active"><a href="#subtabmenu1" data-toggle="tab"> Sub Menu Item 1</a> </li>
                              <li><a href="#subtabmenu2" data-toggle="tab"> Sub Menu Item 2</a> </li>
                              <li><a href="#subtabmenu3" data-toggle="tab"> Sub Menu Item 3</a> </li>
                              <li><a href="#subtabmenu4" data-toggle="tab"> Sub Menu Item 4</a> </li>
                            </ul>
                          </div>
                          <div class="col-sm-10">
                            <div id="subtabmenuContent" class="tab-content">
                              <div class="tab-pane active" id="subtabmenu1"> This is the content for sub menu item 1 </div>
                              <div class="tab-pane" id="subtabmenu2"> This is the content for sub menu item 2 </div>
                              <div class="tab-pane" id="subtabmenu3"> This is the content for sub menu item 3 </div>
                              <div class="tab-pane" id="subtabmenu4"> This is the content for sub menu item 4 </div>
                            </div>
                          </div>
                    </div>
                </div> <!-- tabtwo -->

            </div> <!-- userTabContent -->

  </div> <!-- col-lg-12 -->
</div> <!-- row -->

<script>
$(document).ready(function() {
    // show active tab on reload
    if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show');

    // remember the hash in the URL without jumping
    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
       if(history.pushState) {
            history.pushState(null, null, '#'+$(e.target).attr('href').substr(1));
       } else {
            location.hash = '#'+$(e.target).attr('href').substr(1);
       }
    });
});
</script>

引导选项卡 - 记住在页面刷新时选择的选项卡

0 个答案: