Question

我没有尝试创建垂直滚动或平滑滚动，我把Jquery放在一起时感到困惑，因为我对它很新。我知道我需要创建一个带参数的函数来接受部分名称与我的链接协调的内容我有一个主要部分，将显示一个完整的导航，当用户点击我希望主要部分隐藏的导航项目，然后我想添加一个活动的类只显示下一个＆＃34;页面的内容＆＃34; / 部分。

我创建了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中的示例

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

}）;

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

Answer 2

你走在正确的轨道上！

虽然我建议稍微调整一下你的标记，以隐藏那些不容易看到的部分，但我已经调整了你的小提琴来做我认为你在问的问题：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 3

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

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

然后使所有部分div显示：none;与他们的身份。

然后创建.active，即display：inherit！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。

最佳，列维

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

绊倒你的一个关键因素是，您可以在链接的任何点击中为所有内容添加活动类，并且不会在任何时候删除它。另一个是你没有css隐藏和显示基于你给它的类的内容。附加了活动类，但没有指示实际执行任何操作，您希望在css中设置它。

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

tag3

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

使用jquery单页网站导航

5 个答案: