Question

所以我有4个div标签，id为content1; content2; content3和content4。在开始时，content1仅显示，其他所有3个内容都不可见，我收到了包含链接的菜单#content1，#content2，#content3，#content4 。
所以我需要创建，当有人点击content3链接时，当前内容将隐藏，content3内容将显示，与所有其他内容相同。

我的问题 - 我知道如何使用一个元素进行显示/隐藏，但我没有使用2个或更多元素创建任何内容，所以也许你可以帮我创建它？

Answer 1

如果你给你的内容divs一个类，比如说“content”，很容易将它们选为一个组并隐藏它们。同样，如果您为菜单链接指定一个类，则可以一次为所有菜单指定一个单击处理程序。所以：

<a class="menu" href="#content1">Content 1</a>
<div class="content" id="content1">Some content here</div>
<!-- and so forth for your other links and divs -->

<script>
   $(function() {
       $("a.menu").click(function() {
          $("div.content").hide();
          $(this.href).show();
          return false;
       });
   });
</script>

请注意，如果脚本块出现在相关元素之后，您实际上不需要将代码包装在document.ready处理程序中，但为了完整起见，我在这里完成了。

我意识到上面的内容可能与你的html标记不对应，但是因为你实际上没有提供你的html标记我不得不猜...

如果你不明白这个答案中的任何内容我建议你阅读一些jQuery教程，例如this one from the jQuery website;教程超出了StackOverflow答案的范围......

Answer 2

Per @ Robin的建议，请查看：

http://jqueryui.com/demos/tabs/

添加show / hide到我的div标签

2 个答案: