Question

在我的导航标签设置选项卡上，我在垂直列表中有一个嵌套的导航标签。可选标签 - 左边当我重新加载我的页面时，只有我的父.nav标签记住使用了哪个标签。

问题：当我在设置标签中时，我点击了嵌套选项卡如何确保当我重新加载页面时，两者都保留在正确的标签？

此脚本似乎仅适用于父navtabs而非嵌套的。

<script type="text/javascript">
$(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();
  }
});
</script>

HTML

<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
                <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
                <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
                <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content" style="padding-top: 20px;">
                <div role="tabpanel" class="tab-pane" id="home"></div>
                <div role="tabpanel" class="tab-pane" id="profile"></div>
                <div role="tabpanel" class="tab-pane" id="messages"></div>

                <div role="tabpanel" class="tab-pane" id="settings">
                    <div class="row">
                        <div class="col-sm-3">
                            <div class="tabbable tabs-left">
                                <ul class="nav nav-tabs">
                                    <li><a href="#a" data-toggle="tab">Edit Profile</a></li>
                                    <li><a href="#b" data-toggle="tab">Edit Avatar</a></li>
                                    <li class=""><a href="#c" data-toggle="tab">Privileges</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-sm-9">
                            <div class="tab-content">
                                <div class="tab-pane" id="a">
                                    Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate.
                                    Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.
                                </div>
                                <div class="tab-pane" id="b">
                                    Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
                                    Aliquam in felis sit amet augue.
                                </div>
                                <div class="tab-pane" id="c">
                                    Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
                                    Quisque mauris augue, molestie tincidunt condimentum vitae.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    </div>

    </div>

    </div>

重新加载页面时，嵌套选项卡不会保留在选项卡上

0 个答案: