jQuery鏈接到一個標籤

Question

我試圖讓它可以鏈接到特定的標籤，但似乎無法讓它正常工作。任何幫助將不勝感激，謝謝。

HTML

<div class="tab-ct"> 

    <ul class="tabs"> 
     <li class="tab-link current" data-tab="tab-1">Tab One</li> 
     <li class="tab-link" data-tab="tab-2">Tab Two</li> 
     <li class="tab-link" data-tab="tab-3">Tab Three</li> 
     <li class="tab-link" data-tab="tab-4">Tab Four</li> 
    </ul> 

    <div id="tab-1" class="tab-content current"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </div> 
    <div id="tab-2" class="tab-content"> 
     Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    </div> 
    <div id="tab-3" class="tab-content"> 
     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
    </div> 
    <div id="tab-4" class="tab-content"> 
     Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </div> 

</div> 

JS

$(document).ready(function(){ 

    $('.tab-link').click(function(){ 
    var tab_id = $(this).attr('data-tab'), $ct = $(this).closest('.tab-ct'); 

    $ct.find('ul.tabs li.current').removeClass('current'); 
    $ct.find('.tab-content.current').removeClass('current'); 

    $("li.tab-link[data-tab='"+ tab_id+"']").addClass('current'); 
    $("#"+tab_id).addClass('current'); 
    }); 

}); 

Answer 1

好...讀你的問題的解釋，我看到有一件事你錯過。

錨點如何工作：它們只是將瀏覽器窗口移動到頁面的某一點。這是一種標準行爲，它獨立於div的屬性（和內容）。

您的標籤瀏覽不是標準組件，但它有幾個由JS編寫的自定義行爲。 所以你應該說你的JS代碼（在頁面加載）來截取錨點的名稱，然後添加「當前」類適當的元素。

我不知道您要實現導航的細節（它是可能的，你需要修改了一下你的代碼），但你需要的東西，如：

$(document).ready(function(){ 

    var hash = window.location.hash; // to get content after # in the URL 
if (hash.indexOf("tab-") === 0) { 
    $("#"+hash).siblings('div').each(function() { 
     $(this).removeClass('current'); 
    }); 
    $("#"+hash).siblings('ul').children("li").each(function() { 
     $(this).removeClass('current'); 
    }); 
    var tab_id = $("#"+hash).addClass('current'); 
    $("li.tab-link[data-tab='"+ hash+"']").addClass('current');   
} 


    $('.tab-link').click(function(){ 
    // your existing code 
    }); 

}); 

希望它可以幫助

更新：如果頁面中存在不同組的選項卡，我添加了一個基本實現也可以工作