Bootsrap Twitter選項卡 - 頁面重新加載時轉到特定選項卡

我正在開發一個Web應用程序。在我使用Twitter Bootstrap窗格選項卡的某些網頁中。下面是我的代碼。Bootsrap Twitter選項卡 - 頁面重新加載時轉到特定選項卡

我想在頁面重新加載時轉到特定的選項卡。例如：當我在www.mywebsite.com/c.html中時，當我轉到'cc'並刷新頁面時，第一個活動選項卡是'bc'，它會返回到'bc'。我希望它留在'cc'中。我需要能夠做這樣的事情www.mywebsite.com/c.html#cc但這不起作用。

我看着Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload?，但找不到適合我的代碼的答案。我試圖改變類名仍然沒有運氣。

<div class="wp"> 
    <div class="widget"> 
     <div class="tabs"> 
      <ul class="nav nav-pills nav-justified"> 
       <li class="active"><a href="#bc" data-toggle="tab">bc</a></li> 
       <li><a href="#cc" data-toggle="tab">cc</a></li> 
       <li><a href="#lc" data-toggle="tab">lc</a></li> 
       <li><a href="#pc" data-toggle="tab">pc</a></li> 
       <li><a href="#sc" data-toggle="tab">sc</a></li>           
      </ul> 
     </div> 
    </div> 
</div> 
<div class="tab-content tab-content-inverse"> 
    <div class="tab-pane active" id="bc"> 
     ... 
    </div> 
    <div class="tab-pane" id="cc"> 
     ... 
    </div> 
    <div class="tab-pane" id="lc"> 
     ... 
    </div> 
    <div class="tab-pane" id="pc"> 
     ... 
    </div> 
    <div class="tab-pane" id="sc"> 
     ... 
    </div> 
</div>

來源

2014-11-21 Program_ming

您可以使用JavaScript編寫一些代碼，將運行在頁面加載時，檢查URL（window.location.hash）的＃部分。查看bootstrap網站以瞭解如何切換某個選項卡：http://getbootstrap.com/javascript/#tabs

來源

2014-11-21 17:31:43 curiousinternals

謝謝，我現在就來看看。 – 2014-11-21 17:53:09

除非提問者指定他們使用的是Twitter Bootstrap 2.xx，否則我不會將它們鏈接到本質上已過時的文檔中.... – MattD 2014-11-21 18:00:44

@MattD哦，快點，我很匆忙，並沒有意識到我正在看舊網址。感謝您指出了這一點。使用最新的網址編輯。 – curiousinternals 2014-11-21 18:31:54

在JavaScript/jQuery中使用location.hash獲取URL的錨點部分。

然後，將其追加到下面的JavaScript：

document.querySelector('.nav li a[href="#lc"]').click();

你只需插入你拉使用的location.hash中的href =部分，然後將被點擊後的值。

更改以下Bootply示例中的值並運行它以查看其工作原理。

BOOTPLY

來源

2014-11-21 18:10:53 MattD

我想通了。謝謝你回覆我。 – 2014-11-21 18:15:27

這爲我工作。我將班級名稱更改爲選項卡，並將活動更改爲單擊活動

$(document).ready(function() {    
      var hash = document.location.hash; 
      var prefix = "tab_"; 
      if (hash) { 
       $('.tabs a[href=' + hash.replace(prefix, "") + ']').tab('show'); 
      } 
      $('.tabs a').on('click', function (e) {      
       window.location.hash = e.target.hash.replace("#", "#" + prefix); 
      }); 
    });

來源

2014-11-21 18:12:38

Bootsrap Twitter選項卡 - 頁面重新加載時轉到特定選項卡

回答

相關問題