如何获取隐藏的整页内容，并在通过锚点单击时仅显示特定部分答案

【问题标题】：How to take a whole page of content that is hidden and only show a specific piece when clicked via anchor如何获取隐藏的整页内容，并在通过锚点单击时仅显示特定部分
【发布时间】：2013-10-01 21:13:36
【问题描述】：

我在一个页面上有一堆内容，每个内容都有锚点来定位，这些锚点基本上就像书签和锚点指向的内容我使用了 hide();除了第一段，因为它只是介绍性的东西。我的最终目标是：
当我点击一个锚点时，它只会取消隐藏那一个段落并保持其余部分隐藏。然后，当我单击另一个锚点时，它会重新隐藏上一段并仅显示我刚刚单击的锚定段落中的内容

到目前为止，我所拥有的（实际上并不多）是：

                      $('#content p:not("#firstParagph")').toggle();`

我尝试使用 .filter(':hidden') 和 show() 但它最终破坏了所有代码（我确定这是因为我做错了什么）我以前是如何让它工作的是替换 css 代码 display:inline 但我想这样做而不必更改 CSS，因为所有 css 都已经存在

【问题讨论】：

标签： jquery hide show-hide hidden

【解决方案1】：

$('.trigger').click(function(e) // Trigger is the common class for all the anchors
{
     $('#content p').hide(); // Hide all the paragraphs initially. This makes all the visible paragraphs to hide
     $('#content p#'+$(this).attr('src')).show(); // Showing the paragraph which ID is matching to the anchor's src attribute
}

检查样本here。

【讨论】：

它就像一个魅力！我看到我的主要问题是当我尝试连接“this”时，这就是我遇到所有麻烦的地方。再次感谢您！

【解决方案2】：

你看起来像这样吗：

HTML：

<div class="intro"> 
  <a href="intro">Intro</a>
  <p>intro</p>
</div>
<div class="first"> 
  <a href="#">1st</a>
  <p>First</p>
</div>
<div class="second">
  <a href="#">2nd</a>
  <p>Second</p>
</div>
<div class="third"> 
  <a href="#">3rd</a>
  <p>third</p>
</div>

Javascript：

$('p').hide();
$('.intro p').show();

$('a').on('click', function (e) {
   e.preventDefault();
   $('p').hide();
   $(this).closest('div').find('p').show();
});

这里是小提琴：http://jsfiddle.net/SznuP/

【讨论】：

非常感谢您！它非常接近我的需要！不过，我想我可以从这一点上弄清楚，再次感谢您！