0

看看这里

每个 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>
4

7 回答 7

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()
})

演示

于 2012-07-12T20:09:51.777 回答
0

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

于 2012-07-12T20:09:43.547 回答
0

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

.container { display:none; }

然后就可以好好利用hrefandid属性了，如下

$('.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"   />
于 2012-07-12T20:10:02.017 回答
0

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

于 2012-07-12T20:11:32.240 回答
0

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

于 2012-07-12T20:11:55.757 回答
0

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

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

$(document).ready(function() {
    $(window).trigger('hashchange');
});
于 2012-07-12T21:27:45.233 回答
-1

看文档：http ://api.jquery.com/visual/ (Effects -> Basiscs -> show(speed, callback)) 稍微学习一下，肯定你一个人就能搞定。

于 2012-07-12T20:14:24.527 回答