javascript - 使用 jquery 的单页站点导航

Question

我不是要创建垂直滚动或平滑滚动，将 jquery 放在一起时我会感到困惑，因为我对它太陌生了。我知道我需要创建一个带有参数的函数来接受与我的链接协调的部分名称。
我有一个将显示完整导航的主要部分，当用户单击我希望隐藏主要部分的导航项时，我想添加一个事件类以仅显示下一个“页面”/部分的内容.

我创建了 jsfiddle。

$(document).on('click','.nav-link',function(e){
    $('.section').closest('div').addClass('active');

});

function content(dv){
var dv = document.querySelectorAll('.nav-link[data-target]');
console.log(dv);

}
content();

我的 html:

<div id="main">
    <div class="wrapper-menu">
    <!-- navigation -->
        <header>    
            <nav class="slide-in menu">
                <ul class="hide">
                    <li><a href="#" data-target="go" class="nav-link">Go dog go<span></span></a></li>
                    <li><a href="#" data-target="by" class="nav-link">Stop dog stop<span></span></a></li>
                    <li><a href="#" data-target="bike" class="nav-link">To a dog party<span></span></a></li>
                </ul>
            </nav>
        </header>
    </div>
</div>

https://jsfiddle.net/r_heneault/jyvzxeha/5/

我知道我想多了一些简单化的东西:|

Answer 1

你走在正确的轨道上!

虽然我建议稍微调整您的标记以更轻松地隐藏不应该可见的部分，但我已经调整了您的 fiddle 来完成我认为您要问的事情:jsFiddle

注意: 关键是(保持简单，使用 jQuery)，并从链接中获取 ID(通过 .data('target'))，然后使用该 ID 显示相关的 div。

脚本的相关更改如下:

$(document).on('click','.nav-link',function(e){
    // get the div ID from the link's "data-target"
    var id = $(this).data('target');
    // hide ALL divs with the id
    $('.section > div[id]').hide();
    // show only the relevant div with the targeted ID
    $('#' + id).show();
});

备用:

如果您的目标是显示隐藏相关的 div.section，那么我再次建议修改您的标记以简化此操作。但是，您可以使用当前的 jQuery 标记来执行此操作:

$(document).on('click','.nav-link',function(e){
  // get the ID
  var id = $(this).data('target');
  // hide all sections
  $('.section').hide();
  // show the section that contains the div with the target ID
  $('#' + id).closest('.section').show();
});