制作DIV展开视图（即显示另一个DIV）

我在下图中有4个div。每个div是现在指向'＃'的链接。我怎样才能做到这一点，当我点击一个div底部的虚线展开显示另一个div。制作DIV展开视图（即显示另一个DIV）

每个“div链接”有一个不同的视图（只是一个div），它显示。

Image of Div Links

下面是的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标签是一个很好的解决方案呢？

来源

2012-01-03 Free Lancer

你有没有尝试过任何东西？ – maxedison 2012-01-03 20:30:45

是的。我正在玩.show和。隐藏，但我觉得代码太麻烦。我觉得必须有一个更简单的方法。我应该发布这个。 – 2012-01-03 21:01:18

是的，你应该。为了回应你的编辑，我认为如果你有任何想要真正倾斜jQuery的意图，jQuery Tabs是完全不必要的。你想要完成的并不难，所以我认为一个插件是过度的。 – maxedison 2012-01-04 15:37:02

你可能会考虑使用jQuery UI选项卡。您的每个DIV都将是一个选项卡，并且该视图将成为选项卡的内容。这里有一个链接：http://jqueryui.com/demos/tabs/#collapsible

来源

2012-01-03 20:33:53 scripto

这实际上可能是最简单的方法。这些标签是否可定制，以便我可以使用我已有的东西？ – 2012-01-03 21:00:21

我相信他们是。您可以将任何内容放入选项卡中。每个标签由LI标签创建，您可以放入任何东西。 CSS也可以自定义。 – scripto 2012-01-03 21:50:50

你应该看看jQuery的.show()功能在这里：http://api.jquery.com/show/

在document.ready()可以隐藏div，你以后要显示。然后你就可以一click功能结合到这样的DIV：

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

来源

2012-01-03 20:30:25 Rondel

试试这个：

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

来源

2012-01-03 20:31:44

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

为`见文档.show（）” here

注： HTML标签 - > ID属性应该是跨HTML docuement唯一的，你比如说你似乎使用相同的ID（<div id="link" onclick="location.href='#';" >）为div的。

检查.animate here，如果你想与像幻灯片，不褪色一些样式来显示下方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

试试这些让我知道你是否需要一些说明。

来源

2012-01-03 20:34:50

制作DIV展开视图（即显示另一个DIV）

回答

相关问题