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代码说（在页面加载时）拦截锚的名称，然后添加＆＃34;当前＆＃34;对适当的元素进行分析。

我无法了解您正在实施的导航的详细信息（您可能需要修改一下代码），但您需要以下内容：

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

});

希望有所帮助

更新：如果页面中存在不同的标签组，我也会添加一个能够正常工作的基本实现

jQuery链接到选项卡

1 个答案: