Bir sayfayı yeniden yükledikten sonra geçerli sekmeyi twitter önyükleme ile etkin tutuyor musunuz?

Question

Bu soru aşağıdaki sonrası daha önce sorulan ve cevap verilmiştir biliyoruz: komut dosyası benim sınırlı bilgi verilmiş

Ancak

How do I keep the current tab active with twitter bootstrap after a page reload?

, web siteme üzerinde çalışmak için bu almanız mümkün olmamıştır. Kodu html sayfama yükledikten sonra, sekmeler yine de sayfadaki ilk ve etkin olana gider.

Lütfen birisi yukarıdaki bağlantıda sunulan çözümün çalışan bir örneğini paylaşabilir.

Benim kod şöyle görünür: yazdı

Son derece takdir

<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="http://localhost:8080/nationalcareers/JOBSEEKERS/index.php?category=home&action=received">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="http://localhost:8080/nationalcareers/EMPLOYERS/index.php?category=postings&action=my">View Reports For Your Adverts</a></li> 
         <li><a href="http://localhost:8080/nationalcareers/EMPLOYERS/index.php?category=home&action=sub_accounts">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> 

,

Answer 1

Tommi Komulainen gibi: e.target karma dahil olmak üzere tam URL'sini içeriyor. Sadece hash'a ihtiyacın var. Yani e.target.toString().split('#')[1]) kullanın; $(this).attr('href') $('#'+lastTab).tab('show');, data-toggle ile bağlantıya (etiket) başvurmanız gerektiğinde, div = #{lastTab} ile .tab() uygular. Yani kullanın: $('a[href=#' + lastTab + ']').tab('show'); burada. böylece kaynağından aktif sınıfını kaldırmak https://stackoverflow.com/a/16016592/1596547 görmek ve lastTab ayarlanmamış aktif birinci sekmeyi ayarlayın:

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

güncelleştirme:

tamamlama fonksiyonu kullanmak.

Answer 2

Bir pushstate kullanmayı tercih ederim.

Bana "Web yolu ..." gibi geliyor ve göstermek istediğim sekmeye doğru işaret eden harici bağlantılara sahip olmamı sağlıyor.

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