giữ tab hiện tại hoạt động với twitter bootstrap sau khi tải lại trang?

Question

Tôi biết câu hỏi này đã được hỏi trước và đã trả lời trong bài viết sau đây:

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

Tuy nhiên, do kiến ​​thức hạn chế của tôi về kịch bản, tôi đã không thể có được điều này để làm việc trên trang web của tôi. Sau khi đưa mã vào trang html của tôi, các tab vẫn chuyển đến trang đầu tiên và hoạt động khi tải lại trang.

Vui lòng ai đó có thể chia sẻ ví dụ làm việc về giải pháp được trình bày trong liên kết ở trên.

Mã của tôi trông như thế này:

<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> 

tôi đánh giá cao,

Answer 1

Như Tommi Komulainen đã viết: e.target chứa url đầy đủ bao gồm các hash. Bạn chỉ cần băm. Vì vậy, hãy sử dụng e.target.toString().split('#')[1]); hoặc thậm chí tốt hơn $(this).attr('href') $('#'+lastTab).tab('show'); áp dụng .tab() trên div có id = #{lastTab} trong khi bạn cần phải áp dụng trên liên kết (thẻ) với data-toggle. Vì vậy, hãy sử dụng: $('a[href=#' + lastTab + ']').tab('show'); tại đây.

Chức năng hoàn chỉnh để sử dụng:

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

cập nhật: thấy https://stackoverflow.com/a/16016592/1596547 để loại bỏ các lớp tích cực từ nguồn của bạn và đặt tab đầu tiên hoạt động khi lastTab không được thiết lập.

Answer 2

Tôi thích sử dụng pushstate hơn.

Có vẻ như "Cách web ..." với tôi và nó cho phép tôi có các liên kết bên ngoài trỏ tới tab tôi muốn hiển thị.

Đây là chức năng của tôi:

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