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 
    }); 

}); 

希望它可以帮助

更新：如果页面中存在不同组的选项卡，我添加了一个基本实现也可以工作