Сохранить текущую вкладку активным с помощью 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) { $('#'+lastTab).tab('show'); } }); </script> <div class="tab-content" style="padding: 0 5px;"> <div class="tab-pane active" id="tab1"> <div class="navbar" style="width:930px;"> <div class="navbar-inner"> <div class="container"> <ul class="nav2" style="padding-top:0px;"> <li><a href="#">Job Search</a></li> <li><a href="#">Training Programmes</a></li> <li><a href="#">Job Alerts</a></li> <li><a href="#">My Job Applications</a></li> <li><a href="#">My Studies</a></li> <li><a href="#" onclick="location.href='http://localhost:8080/nationalcareers/JOBSEEKERS/index.php?category=home&action=received'; return false;">Received Messages</a></li> </ul> </div> </div> </div> </div> <div class="tab-pane" id="tab2"> <div class="navbar" style="width:900px;"> <div class="navbar-inner"> <div class="container"> <ul class="nav2" style="padding-top:0px;"> <li><a href="#">Manage Your Job Adverts</a></li> <li><a href="#">Browse CV's</a></li> <li><a href="#">Manage Job Applications</a></li> <li><a href="#" onclick="location.href='http://localhost:8080/nationalcareers/EMPLOYERS/index.php?category=postings&action=my'; return false;">View Reports For Your Adverts</a></li> <li><a href="#" onclick="location.href='http://localhost:8080/nationalcareers/EMPLOYERS/index.php?category=home&action=sub_accounts'; return false;">Manage Sub-Accounts</a></li> </ul> </div> </div> </div> </div> <div class="tab-pane" id="tab3"> <div class="navbar" style="width:900px;"> <div class="navbar-inner"> <div class="container"> <ul class="nav2" style="padding-top:0px;"> <li><a href="#">Browse Training Programmes</a></li> <li><a href="#">Browse Featured Training Providers</a></li> </ul> </div> </div> </div> </div> <div class="tab-pane" id="tab4"> <div class="navbar" style="width:900px;"> <div class="navbar-inner"> <div class="container"> <ul class="nav2" style="padding-top:0px;"> <li><a href="#">Jobs</a></li> <li><a href="#">Training Programmes</a></li> <li><a href="#">Your Company</a></li> <li><a href="#">Your Recruitment Agency</a></li> </ul> </div> </div> </div> </div> <div class="tab-pane" id="tab5"> <div class="navbar" style="width:900px;"> <div class="navbar-inner"> <div class="container"> <ul class="nav2" style="padding-top:0px;"> <li><a href="#">Search Current Opportunities</a></li> <li><a href="#">News and Updates</a></li> <li><a href="#">Events</a></li> </ul> </div> </div> </div> </div> <div class="tab-pane" id="tab6"> <div class="navbar" style="width:900px;"> <div class="navbar-inner"> <div class="container"> <ul class="nav2" style="padding-top:0px;"> <li><a href="#">Career Advice</a></li> <li><a href="#">CV/Resume</a></li> <li><a href="#">Interview Preparation</a></li> <li><a href="#">Career Net-Work</a></li> </ul> </div> </div> </div> </div> </div> </div> </div>

Высоко ценится,

Ответы

Ответ 1

Как Томми Комулайнен написал: e.target содержит полный URL-адрес, включая хэш. Вам нужен только хэш. Поэтому используйте e.target.toString().split('#')[1]); или даже лучше $(this).attr('href') $('#'+lastTab).tab('show'); применяет .tab() к div с id = #{lastTab}, пока вам нужно применить ссылку (тег) с помощью data-toggle. Поэтому используйте: $('a[href=#' + lastTab + ']').tab('show'); здесь.

Полная функция для использования:

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

Обновление: см. fooobar.com/questions/25509/..., поэтому удалите активный класс из вашего источника и установите первую вкладку активную, если lastTab не установлен.

Ответ 2

Я предпочитаю использовать pushstate.

Мне кажется, что это похоже на "Веб-путь...", и это позволяет мне иметь внешние ссылки, указывающие прямо на вкладку, которую я хочу показать.

Это моя функция:

function setBootstrapTabs()
{
    var activeTab = "#" + getParameterByName("submenu");

    $('a[data-toggle="tab"]').on('shown', function () {
        //save the latest tab;
        var new_url = updateUrlParam("submenu",
            $(this).attr('href').replace("#",""));
        window.history.replaceState({
                turbolinks: true, position: Date.now()
            }, document.title, new_url
        );
    });

    if (activeTab.length > 0) {
        $('a[href=' + activeTab + ']').tab('show');
    }
};