使用 jquery 进行单页站点导航

我不是在尝试创建垂直滚动或平滑滚动，在将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();

我的网页：

<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/

我知道我想太多了：|

你走在正确的轨道上！

虽然我建议稍微调整您的标记以更轻松地隐藏不应该可见的部分，但我已经调整了您的小提琴以完成我相信您在问的事情：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();
});

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

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

然后让所有部分div 显示：none; 带有他们的 id。

然后创建显示的 .active：继承！important;

从一开始就给其中一个divs 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。

最好利瓦伊

让您感到困惑的一个关键部分是，您在单击链接时向所有内容添加一个活动类，并且它在任何时候都不会被删除。另一个是你没有根据你给它的类隐藏和显示内容的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/

最简单的是这样的：

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

如果你想隐藏你的内容的某些元素，你可以在我的jsfiddle中查看一个例子

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

}(;

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

相关内容

最新更新

热门标签：