保持當前引導選項卡頁面重新加載後不主動跳轉到第一個

之間

<div class="container"> 
    <ul class="nav nav-pills"> 
    <li class="active"><a data-target="#home" data-toggle="tab">Home</a></li> 
    <li><a href="#about" data-toggle="tab">About</a></li> 
    <li><a href="#contacts" data-toggle="tab">Contacts</a></li> 
    </ul> 
</div> 

<div class="tab-content"> 
    <div class="tab-pane active" id="home">Home</div> 
    <div class="tab-pane" id="about">About</div> 
    <div class="tab-pane" id="contacts">Contacts</div> 
</div>

爲了保持頁面重新加載後，我使用下面的函數相同的標籤：

$(function() { 
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
    localStorage.setItem('lastTab', $(this).attr('href')); 
    }); 
    var lastTab = localStorage.getItem('lastTab'); 
    if (lastTab) { 
    $('[href="' + lastTab + '"]').tab('show'); 
    } 
});

的問題是，頁面重載之後，第一個標籤變爲1的第二活性，然後將它跳轉到實際活動標籤。如果沒有這種「跳躍」，我可以保留當前標籤嗎？

來源

2016-09-05 Zelenka

無論是隱藏的選項卡，直到您決定顯示哪一個，或寫'active'類聯腳本。還有一種方法是在加載任何其他腳本之前設置「active」類，這樣您就不會等待一秒鐘，它會很快完成。 – skobaljic

我認爲在目前的狀態 - 你不能 - 你在不同的狀態呈現你的藥片，然後通過javascript切換它 - 你應該在服務器端存儲活動藥丸狀態或在切換之前將所有內容隱藏在某種裝載器（UX）下面到適當的藥片/標籤 – mrmnmly

答案是作爲ABC一樣簡單。

我只是需要從第一<li></li>標籤刪除類=「主動」：

<li><a data-target="#home" data-toggle="tab">Home</a></li>

來源

2016-09-05 14:05:32 Zelenka

有了這個當用戶第一次來沒有標籤將打開。 – shazyriver

這條線：

$('[href="' + lastTab + '"]').tab('show');

必須改變：

$('[data-target="' + lastTab + '"]').tab('show');

你不能指HREF但數據目標。

同樣適用於：localStorage.setItem .....

固定代碼（jsfiddle）：

$(function() { 
    var lastTab = localStorage.getItem('lastTab'); 
    $('.container, .tab-content').removeClass('hidden'); 
    if (lastTab) { 
    $('[data-target="' + lastTab + '"]').tab('show'); 
    } 
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
    localStorage.setItem('lastTab', $(this).data('target')); 
    }); 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<div class="container hidden"> 
    <ul class="nav nav-pills"> 
     <li><a data-target="#home" data-toggle="tab">Home</a></li> 
     <li><a data-target="#about" data-toggle="tab">About</a></li> 
     <li><a data-target="#contacts" data-toggle="tab">Contacts</a></li> 
    </ul> 
</div> 

<div class="tab-content hidden"> 
    <div class="tab-pane" id="home">Home</div> 
    <div class="tab-pane" id="about">About</div> 
    <div class="tab-pane" id="contacts">Contacts</div> 
</div>

來源

2016-09-05 13:47:08 gaetanoM

我的錯誤，我只是注意到，我的代碼在所有'''''標記中都有'''href'''而不是''data-target''（請參閱編輯我的問題，非常抱歉）。所以我改變了他們，並使用固定的代碼，但問題仍然是相同的：第一個標籤變爲活動1秒，然後才需要選項卡 – Zelenka

@Zelenka您可以添加隱藏的類，然後重新組織你的js，就像我的代碼片段。讓我知道。 – gaetanoM

我在下面添加了對這個問題的答案。謝謝你的時間！ – Zelenka

保持當前引導選項卡頁面重新加載後不主動跳轉到第一個

回答

相關問題