相关疑难解决方法(0)

Bootstrap 3:在页面刷新时保持选中的选项卡

我试图通过Bootstrap 3在刷新时保持选定的选项卡处于活动状态.尝试并检查了一些问题已经在这里被问过,但没有为我工作.不知道我哪里错了.这是我的代码

HTML

<!-- tabs link -->
<ul class="nav nav-tabs" id="rowTab">
    <li class="active"><a href="#personal-info" data-toggle="tab">Personal Information</a></li>
    <li><a href="#Employment-info" data-toggle="tab">Employment Information</a></li>
    <li><a href="#career-path" data-toggle="tab">Career Path</a></li>
    <li><a href="#warnings" data-toggle="tab">Warning</a></li>
</ul>
<!-- end: tabs link -->

<div class="tab-content">
    <div class="tab-pane active" id="personal-info">
        tab data here...
    </div>

    <div class="tab-pane" id="Employment-info">
        tab data here...
    </div>

    <div class="tab-pane" id="career-path">
        tab data here...
    </div>

    <div class="tab-pane" id="warnings">
        tab data here...
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

Javascript:

// tab
$('#rowTab a:first').tab('show');

//for bootstrap 3 use 'shown.bs.tab' …
Run Code Online (Sandbox Code Playgroud)

jquery tabs twitter-bootstrap twitter-bootstrap-3

114
推荐指数
9
解决办法
17万
查看次数

页面重新加载后,使用twitter bootstrap保持当前标签处于活动状态?

我知道之前曾问过这个问题并在以下帖子中回答:

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

但是,鉴于我对脚本的了解有限,我无法在我的网站上使用它.将代码放入我的html页面后,选项卡仍然会转到第一个并且在页面上重新加载.

请有人可以分享上面链接中提供的解决方案的工作示例.

我的代码看起来像这样:

<div class="tabbable" style="margin-bottom: 8px;">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#tab1" data-toggle="tab">My Career Centre</a></li>
          <li class=""><a href="#tab2" data-toggle="tab">Hiring Companies</a></li>
          <li class=""><a href="#tab3" data-toggle="tab">Training Providers</a></li>
          <li class=""><a href="#tab4" data-toggle="tab">Advertise</a></li>
          <li class=""><a href="#tab5" data-toggle="tab">Graduate Opportunities</a></li>
          <li class=""><a href="#tab6" data-toggle="tab">Career Forum</a></li>
        </ul>           
        <script type="text/javascript">
                  $(function() 
                    { 
                      $('a[data-toggle="tab"]').on('shown', function (e) {
                        //save the latest tab; use cookies if you like 'em better:
                        localStorage.setItem('lastTab', $(e.target).attr('id'));
                      });

                      //go to the latest tab, if it exists:
                      var lastTab = localStorage.getItem('lastTab');
                      if (lastTab) …
Run Code Online (Sandbox Code Playgroud)

twitter-bootstrap

6
推荐指数
1
解决办法
1万
查看次数