2015-12-31 32 views
1

我正在使用波旁補充網站http://refills.bourbon.io/的最小手風琴標籤,並想知道如何鏈接到我網站中其他頁面的特定標籤。當帶有製表符的頁面加載第一個製表符時始終顯示。Bourbon Refills如何鏈接到標籤

我想知道如何與選項卡從不同的網頁上我的網站,但不是具有第一默認選項卡活動鏈接到頁面有第二或第三個標籤被激活。您可以通過訪問http://codepen.io/andrewjcurrie/details/qbqvxo/來查看我指的是什麼,下面是支持選項卡的JavaScript。

$(document).ready(function() { 
$('.accordion-tabs-minimal').each(function(index) { 
$(this).children('li').first().children('a') 
.addClass('is-active').next().addClass('is-open').show();}); 
$('.accordion-tabs-minimal').on('click', 'li > a.tab-link', function(event) { 
if (!$(this).hasClass('is-active')) { event.preventDefault(); 
var accordionTabs = $(this).closest('.accordion-tabs-minimal'); 
accordionTabs.find('.is-open').removeClass('is-open').hide(); 
$(this).next().toggleClass('is-open').toggle(); 
accordionTabs.find('.is-active').removeClass('is-active'); 
$(this).addClass('is-active'); } else { 
event.preventDefault();}});}); 

正如你可以在筆上看到的,我希望有鏈接工作與散列標籤。我希望能夠將#Second_Tab添加到基本URL,並在訪問該鏈接時使第二個選項卡變爲活動狀態。任何提示或建議如何最好地完成這將不勝感激,謝謝!

回答

0

Andrew。

三個步驟來得到這個工作:

  1. 移除第一tab-linkis-active在你的HTML
  2. 添加必要的ID爲每個標籤頁(跟隨你的榜樣,我加id="Second_Tab"
  3. 更新第一JS功能如下:

$('.accordion-tabs-minimal').each(function(index) { 
 
    if (window.location.hash) { 
 
    var hash = $.trim(window.location.hash); 
 
    $(hash).addClass('is-active').next().addClass('is-open').show(); 
 
    } else { 
 
    $(this).children('li').first().children('a').addClass('is-active').next().addClass('is-open').show(); 
 
    } 
 
});

如果URL具有一個哈希和,如果是,增加了必要的類到該選項卡和內容並將其顯示該第一檢查。如果網址中沒有散列,則會顯示第一個標籤的默認行爲。你可以在這裏看到我的工作CodePen http://codepen.io/angeliquejw/pen/xVqzKV?editors=1000

+0

非常好!謝謝Angelique,作品完美。 –