添加show / hide到我的div标签 [英] Adding show/hide to my div tags

问题描述

所以我有4个div标签，id为 - content1 ; 内容2 ; content3 和 content4 。开始时
， content1 仅显示，所有其他3个内容都不可见，我收到了带链接的菜单，＃content1 ，＃content2 ， #content3 ，＃content4 。

所以我需要创建，当有人点击例如 content3 链接时，当前内容将隐藏并且 content3 内容将显示，与所有其他内容相同。

so I got 4 div tags, with id's - content1; content2; content3 and content4. at start, content1 is only shown, and all other 3 contents are invisible, and I got menu with links, #content1, #content2, #content3, #content4.
So I need to create, when somebody clicks for example on content3 link, current content will hide and content3 content will show up, same to all other contents.

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

My question - I know how to make show/hide with one element, but I haven't created anything with 2 or more elements, so maybe you could help me create it?

推荐答案

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

If you give your content divs a class, say "content", it is easy to select them as a group and hide them. Similarly, if you give your menu links a class you can assign a click handler to all of them at once. So:

<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处理程序中块出现在有问题的元素之后，但我已经在这里完成了。

Note that you don't really need to wrap the code in a document.ready handler if the script block appears after the elements in question, but I've done so here for completeness.

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

I realise the above may not correspond to your html markup, but since you didn't actually provide your html markup I had to guess...

如果这个答案中有任何你不理解的东西我建议你阅读一些jQuery教程，比如作为来自jQuery网站的这个;教程超出了StackOverflow答案的范围......

If there's anything in this answer that you don't understand I suggest you read through some jQuery tutorials, such as this one from the jQuery website; a tutorial is beyond the scope of a StackOverflow answer...

这篇关于添加show / hide到我的div标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！