0

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

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

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

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

4

2 回答 2

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
}

在此处查看样本。

于 2013-10-01T21:25:12.853 回答
1

你看起来像这样：

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/

于 2013-10-01T21:39:09.420 回答