2013-11-26 79 views
0

我想通過訪問bootstrap pill菜單中的下拉鍊接,將用戶返回到達內容。Bootstrap 3:返回頁面刷新頁面的下拉選項卡

此問題與this one類似 - 但問題在於,當鏈接處於下拉菜單中時,該解決方案不起作用。

我有koppor的解決方案工作正常,因爲它涉及到藥片本身,但我很難過如何從下拉菜單訪問內容時刷新後返回相同的視圖。

具體來說,當您從「Misc」菜單導航到「xxx」或「yyy」內容,然後刷新頁面,頁面默認爲「家庭」內容(即使'Misc'活性)。

<ul class="nav nav-pills" id="myTab"> 
    <li class="active"><a href="#home">Home</a></li> 
    <li><a href="#profile">Profile</a></li> 
    <li class="dropdown"> 
    <a class="dropdown-toggle" data-toggle="dropdown" href="#misc">Misc<span class="caret"></span></a> 
    <ul class="dropdown-menu"> 
    <li><a class="dropdown-toggle" href="#more_x" data-toggle="pill">xxx</a></li> 
    <li><a class="dropdown-toggle" href="#more_y" data-toggle="pill">yyy</a></li> 
    </ul> 
</li> 
<li><a href="#messages">Messages</a></li> 
    <li><a href="#settings">Settings</a></li> 
</ul> 

<div class="tab-content"> 
    <div class="tab-pane active" id="home">home</div> 
    <div class="tab-pane" id="profile">profile</div> 
    <div class="tab-pane" id="more_x">more info x</div> 
    <div class="tab-pane" id="more_y">more info y</div> 
    <div class="tab-pane" id="messages">messages</div> 
    <div class="tab-pane" id="settings">settings</div> 
</div> 

<script> 
    $('#myTab a').click(function (e) { 
     e.preventDefault() 
     $(this).tab('show') 
    }); 

    // store the currently selected tab in the hash value 
    $("ul.nav-pills > li > a").on("shown.bs.tab", function (e) { 
     var id = $(e.target).attr("href").substr(1); 
     window.location.hash = id; 
    }); 

    // on load of the page: switch to the currently selected tab 
    var hash = window.location.hash; 
    $('#myTab a[href="' + hash + '"]').tab('show'); 
</script> 

任何/所有建議歡迎!

回答

1

我有類似的問題。我所做的是創建一個隱藏的標籤。當頁面加載到該選項卡時,然後加載你真正想要加載的選項卡(你的散列表中有什麼)。

編輯: 我在想它的不同。嘗試將腳本更改爲此。它應該將window.location.hash設置爲活動選項卡,無論何時單擊。

$('#myTab a').click(function (e) { 
    e.preventDefault() 
    $(this).tab('show') 
    window.location.hash = $(this).attr("href"); 

}); 


// on load of the page: switch to the currently selected tab 
var hash = window.location.hash; 

$('#myTab a[href="' + hash + '"]').tab('show'); 
+0

您可以分享代碼如何從隱藏標籤切換到「真實」標籤? – globalSchmidt

+0

工作正常!感謝Matt H! – globalSchmidt