Question

看看here

每个div都被隐藏，当从菜单中单击一个按钮时，它会显示特定内容（div），而其他内容则被隐藏。仅显示主页和所选内容。我的问题是......你怎么用jquery做到这一点？如何隐藏除第一个div之外的所有内容，当单击菜单时，所选内容会出现？

示例：

我的菜单如下：

<nav>
<ul>
<li><a href="#home" class="active">Home</li>
    <li><a href="#page1">Page 1</li>
    <li><a href="#page2">Page 2</li>
    <li><a href="#page3">Page 3</li>
</ul>
</nav>

<article id="page1">
<div class="container">
    <h1>Page 1</h1>
        <p>Page 1 content</p>
</div>
</article>


 <article id="page2" class="dark">
<div class="container">
    <h1>Page 2</h1>
    <p>Page 2 content</p>
</div>
</article>


  <article id="page3">
<div class="container">
    <h1>Page 3</h1>
    <p>Page 3 content</p>
</div>
 </article>

Answer 1

您可以更改与目标元素href相同的锚id值：

<li><a href="#home" class="active">Home</li>
<li><a href="#page1">Page 1</li>
<li><a href="#page2">Page 2</li>
<li><a href="#page3">Page 3</li>

$('a:not(:first)').click(function(e){
  e.preventDefault()
  var href = $(this).attr('href')
  $('article').hide();
  $(href).show()
})

DEMO

Answer 2

您提供的代码段有点令人困惑，但也许您正在寻找toggle？

Answer 3

使用CSS隐藏最初不需要的内容。

.container { display:none; }

然后，您可以充分利用href和id属性，如下所示

$('.link').click(function(){
  var correspondingDivId = $(this).attr('href'); //get id of div to be shown

  $('.container').hide(); //hide all the containers

  $(correspondingDivId).show(); //show only the one we need

});

您显然需要稍微更改标记。

<a href='#Div1'>Link 1 </a>
.
.
<div id="Div1" class="container"   />

Answer 4

不了解JQuery（为什么这么多依赖于框架？），但使用style.display属性很容易实现。设置为“阻止”或“无”显示/隐藏。

Answer 5

在纯CSS中，您可以article { display:none; } article:first-child { display:block; }。这将隐藏其余部分时显示第一个article。

Answer 6

我更喜欢使用hashchange事件（即使IE7不支持它） - 这种方法使单个文章可收藏：

$(window).on('hashchange',function() {
    var hash = location.hash;
    $('article').hide();
    $(hash).show();
});

$(document).ready(function() {
    $(window).trigger('hashchange');
});

Answer 7

查看文档：{{3}}（效果 - ＆gt; Basiscs - ＆gt; show(speed, callback)）稍微研究一下，当然你也可以独自完成。

如何在单击链接时一次显示一个div

7 个答案: