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")
我無法真正理解這將如何運作。該JQuery會激活頁面上的標籤加載? – Rorschach
您在頁面加載時執行代碼 – madalinivascu
這確實有效,因爲它突出顯示了正確的鏈接,但不會激活其下面的選項卡內容。所以,它不會模擬點擊。我將繼續與你給我的工作,如果它導致一個答案不接受它並編輯你的答案與額外的代碼需要/ – Rorschach