使用 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

你在正确的轨道上！

虽然我建议稍微调整您的标记以使隐藏不应该可见的部分更容易，但我已经调整了您的小提琴来做我相信您所要求的：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();
});

Answer 2

我想这就是你想要的......

因此，您需要提供 li id 以用作 jQuery 的选择器。

然后让所有的部分 div 显示：无；和他们的身份证。

然后创建.active即display:inherit !important;

从一开始就给其中一个 div class="active"。

所以当点击 li#go_go 时，它会从其他 div 中删除 .active，然后将 .active 添加到 #go。

其他人也是如此。

$(document).ready(function() {
    $('#go_go').click(function() {
      $('#by').removeClass('active');
      $('#bike').removeClass('active');
      $('#go').addClass('active');
    })
  });

  $(document).ready(function() {
    $('#stop_stop').click(function() {
      $('#go').removeClass('active');
      $('#bike').removeClass('active');
      $('#by').addClass('active');
    })
  });

  $(document).ready(function() {
    $('#bike_bike').click(function() {
      $('#go').removeClass('active');
      $('#by').removeClass('active');
      $('#bike').addClass('active');
    })
  });

div#go {
      display: none;
    }

    div#by {
      display: none;
    }

    div#bike {
      display: none;
    }

    .active {
      display: block !important;
    }

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


<ul id="content" class="layer">
	<li> <!-- about -->
		<div class="section light">
			<div id="go" class="active">
			<a name="go"></a>
				<div class="content">
	  				<h2>Go</h2>
					<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.
Cum horribilem walking dead resurgere de crazed sepulcris creaturis, zombie sicut de grave feeding iride et serpens. Pestilentia, shaun ofthe dead scythe animated corpses ipsa screams. Pestilentia est plague haec decaying ambulabat mortuos. Sicut zeder apathetic malus voodoo. Aenean a dolor plan et terror soulless vulnerum contagium accedunt, mortui iam vivam unlife. Qui tardius moveri, brid eof reanimator sed in magna copia sint terribiles undeath legionis. Alii missing oculis aliorum sicut serpere crabs nostram. Putridi braindead odores kill and infect, aere implent left four dead.</p>
					<div>
						<h3>No</h3>

					</div>
				</div>
 			</div>  <!-- section -->
	</li>

	<li> <!-- about -->
		<div class="section light">
			<div id="by">
			<a name="by"></a>
				<div class="content">
	  				<h2>BY</h2>
					<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.
Cum horribilem walking dead resurgere de crazed sepulcris creaturis, zombie sicut de grave feeding iride et serpens. Pestilentia, shaun ofthe dead scythe animated corpses ipsa screams. Pestilentia est plague haec decaying ambulabat mortuos. Sicut zeder apathetic malus voodoo. Aenean a dolor plan et terror soulless vulnerum contagium accedunt, mortui iam vivam unlife. Qui tardius moveri, brid eof reanimator sed in magna copia sint terribiles undeath legionis. Alii missing oculis aliorum sicut serpere crabs nostram. Putridi braindead odores kill and infect, aere implent left four dead.</p>
					<div>
						<h3>No</h3>

					</div>
				</div>
 			</div>  <!-- section -->
	</li>
	<li> <!-- about -->
		<div class="section light">
			<div id="bike">
			<a name="bike"></a>
				<div class="content">
	  				<h2>Bike</h2>
					<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.
Cum horribilem walking dead resurgere de crazed sepulcris creaturis, zombie sicut de grave feeding iride et serpens. Pestilentia, shaun ofthe dead scythe animated corpses ipsa screams. Pestilentia est plague haec decaying ambulabat mortuos. Sicut zeder apathetic malus voodoo. Aenean a dolor plan et terror soulless vulnerum contagium accedunt, mortui iam vivam unlife. Qui tardius moveri, brid eof reanimator sed in magna copia sint terribiles undeath legionis. Alii missing oculis aliorum sicut serpere crabs nostram. Putridi braindead odores kill and infect, aere implent left four dead.</p>
					<div>
						<h3>No</h3>

					</div>
				</div>
 			</div>  <!-- section -->
	</li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

哦，别忘了链接 jQuery。

最好， 列维

Answer 3

让您感到困惑的一个关键部分是，您在单击链接时为所​​有内容添加了一个活动类，并且它在任何时候都不会被删除。另一个是你没有基于你给它的类隐藏和显示内容的css。活动类已附加，但没有实际执行任何操作的指令，您希望在 css 中进行设置。

查看以下代码/小提琴，了解您正在寻找的工作示例。

$(document).ready(function() {
    $('.nav-tabs > li > a').click(function(event){
    event.preventDefault();//stop browser to take action for clicked anchor

    //get displaying tab content jQuery selector
    var active_tab_selector = $('.nav-tabs > li.active > a').attr('href');

    //find actived navigation and remove 'active' css
    var actived_nav = $('.nav-tabs > li.active');
    actived_nav.removeClass('active');

    //add 'active' css into clicked navigation
    $(this).parents('li').addClass('active');

    //hide displaying tab content
    $(active_tab_selector).removeClass('active');
    $(active_tab_selector).addClass('hide');

    //show target tab content
    var target_tab_selector = $(this).attr('href');
    $(target_tab_selector).removeClass('hide');
    $(target_tab_selector).addClass('active');
     });
  });

https://jsfiddle.net/messerino/thwxnddn/

Answer 4

最简单的是：

将href="#" data-target="go"替换为href="#go"等等

$('.nav-link').on('click',function(e){
    $('.active').removeClass('active');
    $(e.target.getAttribute('href')).closest('div').addClass('active');

});

并像这样添加css：

.section.light > div {
  display:none;
}

.section.light > .active {
  display:block;
}

Answer 5

如果您想隐藏内容的某些元素，可以查看我的 jsfiddle 中的示例

$(document).ready(function(){
$("li").click(function(){
        var a = $(this).attr('name')
     $("#"+a).hide();
});

});

因为我在您的问题中得到的是如何使某些内容可见或隐藏。 ps：已编辑。 https://jsfiddle.net/hfahrudin/jyvzxeha/7/