2016-02-17 55 views
0

我在rails網站上運行ruby,它目前支持javascript和jquery。我正在使用htmlslim,scss和bootstrap。重定向時自動選擇選項卡

我想知道如果有可能有一個按鈕或鏈接發送用戶到另一個頁面,然後自動點擊該頁面上的選項卡。

比如我有一個網頁下面編譯的HTML:

... 
<div class="row"> 
    <ul class="nav nav-tabs profile-tabs" id="userTabs"> 
    <li class="active" id="userItems" role="presentation"> 
     <a data-toggle="tab" href="#items" role="tab"> 
     <span class="key">Items</span> 
     <span class="value">13</span> 
     </a> 
    </li> 
    <li role="presentation"> 
     <a class="stand-card-activate" data-toggle="tab" href="#people" role="tab"> 
     <span class="key">People</span> 
     <span class="value">3</span> 
     </a> 
    </li> 
    </ul> 
</div> 
... 

這是2個選項卡行和項目選項卡是在默認情況下,當用戶訪問的頁面中選擇的選項卡。

有什麼方法可以製作一個按鈕,可以鏈接到此頁面並自動選擇人員選項卡?

這裏是渺茫相同的代碼:

... 
    .row 
    ul#userTabs.nav.nav-tabs.profile-tabs 
     li#userItems.active[role="presentation"] 
     a(href="#items" role="tab" data-toggle="tab") 
      span.key Items 
      span.value = @user.items.count 
     li(role="presentation") 
     a.stand-card-activate(href="#people" role="tab" data-toggle="tab") 
      span.key people 
      span.value = @people_count 
    ... 

編輯2: 到目前爲止的代碼:

苗條:

a.back-to-user-people-btn.pull-left(href=www.yourpage.com/#people) Back to People 

JS:

var hash= window.location.hash; 
    if(hash.length > 0) { 
    $('a[role="tab"]').parent().removeClass('active');//remove the default active tab 
    $('a[href="'+hash+'"]').parent().addClass('active'); 
    } 

這jquery al低於它有正確的選項卡名稱突出顯示和「活動」,但項目選項卡的內容仍然是用戶看到的內容。

編輯3:顯示選項卡的內容纖薄代碼

.tab-content 
    #items.tab-pane.fade.active.in.col-md-12(arialabelledby="items" role="tabpanel") 
     .card-container = render partial: 'partials/item', collection: @user[:items], as: :user_item, locals: {user: @user} 

    #people.tab-pane.fade.active.in.col-md-12(arialabelledby="people" role="tabpanel") 

回答

2

嘗試是這樣的

的鏈接應該是這樣的:www.yourpage.com/#tabhrefid

當頁面加載它將採取來自URL的哈希值並將活動類添加到標籤女巫與同一鏈接相同href

$(function(){ 
     var hash= window.location.hash; 
      if(hash.length > 0) { 
       $('a[role="tab"]').parent().removeClass('active');//remove the default active tab 
       $('a[href="'+hash+'"]').parent().addClass('active'); 
       $('.tab-pane').removeClass('active'); 
       $(hash).addClass('active'); 
      } 
    }); 
+0

我無法真正理解這將如何運作。該JQuery會激活頁面上的標籤加載? – Rorschach

+0

您在頁面加載時執行代碼 – madalinivascu

+0

這確實有效,因爲它突出顯示了正確的鏈接,但不會激活其下面的選項卡內容。所以,它不會模擬點擊。我將繼續與你給我的工作,如果它導致一個答案不接受它並編輯你的答案與額外的代碼需要/ – Rorschach