javascript - 显示隐藏可用内容

Question

我的帖子里有一些内容。但我想隐藏它，直到我点击这篇文章中的链接。我还没有建立这个网站，但我会说出我的想法。

1. The first Heading
2. The second Heading
3. The third Heading
4. The fourth Heading

/* The content following are hidden Until I clicked to a link above. / / Content is available wrapped in a div tag, do not loaded from another site. */

1. Content 1 will be show only click to "1. The first Heading"
2. Content 2 will be show only click to "2. The second Heading"
3. Content 3 will be show only click to "3. The third Heading"
4. Content 4 will be show only click to "4. The fourth Heading"

可以使用 CSS 或 Ajax/jQuery 来创建效果吗？

Answer 1

您可以使用以下 jquery 代码来完成:

$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});

这是 complete demo如何通过点击事件隐藏和显示元素。