將主頁上的錨定標記鏈接到特定標籤

Question

我的網頁頂部有一個導航菜單，並有一個下拉菜單。例如在導航服務頁面有一個下降我們的其他業務的下降是去一個服務頁面，其選項卡結構如下所示：

<section class="tabs"> 

    <ul class="tab-nav"> 
     <li class="active"><a href="#first">First Tab</a></li> 
     <li><a href="#second">Second Tab</a></li> 
     <li><a href="#third">Third Tab</a></li> 
    </ul> 

    <div class="tab-content"> 
     <p>Here's the first piece of content</p> 
    </div> 
    <div class="tab-content active"> 
     <p>My tab is active so I'll show up first! Inb4 tab 3!</p> 
    </div> 
    <div class="tab-content"> 
     <p>Don't forget about me! I'm tab 3!</p> 
    </div> 

</section> 

，我想喜歡讓這個我可以用我的阿克爾標籤直接鏈接到我選擇的選項卡3或1或2，以及當我使用選項卡刷新的頁面不會跳轉到活動選項卡時。我怎樣才能做到這一點與JavaScript？我用這個代碼哈希檢查功能位嘗試過：

$(function() { 
    $(".tab-content").hide().first().show(); 
    $(".tab-nav li:first").addClass("active"); 

    $(".tab-nav a").on('click', function (e) { 
     e.preventDefault(); 
     $(this).closest('li').addClass("active").siblings().removeClass("active"); 
     $($(this).attr('href')).show().siblings('.tab-content').hide(); 
    }); 

    var hash = $.trim(window.location.hash); 

    if (hash) $('.tab-nav a[href$="'+hash+'"]').trigger('click'); 

}); 

的問題是，是，當我點擊第二個選項卡，它顯示了第一個選項卡上的內容...但標籤3看起來不錯。但是當我點擊標籤3然後回到標籤2時，標籤2下面沒有顯示任何內容。也許有人可以簡單地通過我的代碼來完成我想要完成的任務？

ps。我爲我的標籤使用了gumby框架

Answer 1

首先，$($(this).attr('href'))不會找到任何東西，因此無論如何都不會有任何標籤工作。

除此之外，散列鏈接代碼似乎很好。

---

我已經重寫了代碼，以便它現在在下面工作。

鏈接：http://jsfiddle.net/s8Ttm/2/

代碼：

$(".tab-nav a").bind('click', function (e) { 
    e.preventDefault(); 
    $(this).parents('li').addClass("active").siblings().removeClass("active"); 
    $('.tab-content').removeClass('active').hide(); 
    console.log($('.tab-content:eq('+$(this).index()+')')); 
    $('.tab-content:eq('+$(this).parents('li').index()+')').addClass('active').show(); 
}); 

$('.tab-nav a').first().click(); 

var hash = $.trim(window.location.hash); 
if (hash) $('.tab-nav a[href$="'+hash+'"]').trigger('click');