使DIV扩展视图（即显示另一个DIV）

Question

我在下面的图片中有4个div。每个 div 都是一个现在指向“＃”的链接。我怎样才能做到这一点，当我点击 div 时，底部的虚线会展开以显示另一个 div 。

每个“div link”都有一个不同的View（只是一个div）。

以下是DIV的代码：

<div id="tour"> 
   <div id="link" onclick="location.href='#';"  >               
      <img src="images/icn1.png" alt="" />
      <h2>Pitch</h2>
      <p> blah blah blah balh blah blah blah blah balh blah blah blah blah balh <p>
    </div>

    <div id="link" onclick="location.href='#';" >
       <img src="images/icn2.png" alt="" />   
       <h2>Publish</h2>
       <p> blah blah blah balh blah blah blah blah balh blah blah blah blah balh <p>
    </div>
</div>

修改

使用jQuery Tabs是一个很好的解决方案吗？

Answer 1

你应该在这里查看jQuery .show()函数：http://api.jquery.com/show/

在document.ready()上，您可以隐藏稍后要显示的div。然后你可以像这样将click函数绑定到div：

$(".link").click(function () {
    $("#someDiv").show();
});

Answer 2

试试这个：

$('yourdivClass/IDhere').click(function(){
  $('divyouwanttoopen/close').toggle();
)};

Answer 3

您可以考虑使用jQuery UI选项卡。每个DIV都是一个标签，视图将是标签的内容。这是一个链接：http://jqueryui.com/demos/tabs/#collapsible

Answer 4

点击顶部的每个div，您可以使用$（＆＃39; div-element-to-show＆＃39;）。show（）函数来显示。

请参阅`.show（）＆＃39;的文档。的 here

注意： HTML标记 - ＆gt; ID属性在html docuement中应该是唯一的，在您的示例中，您似乎对div使用相同的ID（<div id="link" onclick="location.href='#';" >）。

检查.animate here ，如果你想用幻灯片，淡入淡出，e.t.c这样的风格显示下面的div

步骤1.为<div id="link" onclick="location.href='#';" >添加点击监听器，如下所示，

$('#link').click ( function () { 
      //add code here to show the div
});

步骤2：使用.show显示虚线部分下方的div内容。

步骤3：如果您必须在下面只显示一个div内容，请确保在显示新内容之前使用.hide（）函数隐藏当前显示的div。您可以查看.hide（）文档 here

试试这些，如果您需要澄清，请告诉我。