5
引導按鈕處理與Twitter的引導標籤2.3.2啓用早在IE8 +
我在我的項目中使用tabs從引導顯示內容。在單個頁面上有多個標籤，其中包含不同的內容，並且在這些標籤中包含將用戶帶到網站上其他頁面的鏈接。
不幸的是，默認情況下，這些標籤不支持後退按鈕導航，所以如果用戶訪問另一個頁面並點擊瀏覽器的後退按鈕，該選項卡將恢復爲第一個打開的選項卡，而不是當時處於活動狀態的選項卡他們上次查看該頁面。
下面的Javascript從François Zaninotto解決了Chrome，Firefox和Safari中的這個問題。弗朗索瓦還說，它適用於IE8 + - 但在我的測試中，我無法讓它在IE8，IE9或IE10上運行。有誰知道如何讓這個工作在IE8 +？可能嗎？
$(document).ready(function() {
// add a hash to the URL when the user clicks on a tab
$('a[data-toggle="tab"]').on('click', function(e) {
history.pushState(null, null, $(this).attr('href'));
});
// navigate to a tab when the history changes
window.addEventListener("popstate", function(e) {
var activeTab = $('[href=' + location.hash + ']');
if (activeTab.length) {
activeTab.tab('show');
} else {
$('.nav-pills a:first').tab('show');
}
});
});
`
<ul id="myTab" class="nav nav-pills">
<li class="active"><a href="#tab1" data-toggle="tab">Tab1</a></li>
<li><a href="#tab2" data-toggle="tab">Tab2</a></li>
<li><a href="#tab3" data-toggle="tab">Tab3</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane active" id="tab1">
<h2>Tab 1</h2>
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
</div>
<div class="tab-pane" id="tab2">
<h2>Tab 2</h2>
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
</div>
<div class="tab-pane" id="tab3">
<h2>Tab 3</h2>
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
</div>
</div>
的'history.pushState'是HTML5 。 'popstate'只在IE10中支持。 – putvande
@putvande我不知道如何實現它，但我應該使用[history.js]（https://github.com/browserstate/history.js/）？這對我有用嗎？ – Metzed