HTML5：Details元素介绍

教程细节

• 概要：HTML5的Details标签

• 难度：初级

• 支持的浏览器：Chrome 12以上的版本

我最喜欢的HTML5新标签是details元素，它刚刚被集成到Chrome最新的12版中。我将会在今天的快速入门中展示如何来使用它。

________________________________________

Details标签可以用来做什么？

它本质上允许我们在点击标签时显示和隐藏内容。你一定相当熟悉这种效果，但是直到现在，它总是用Javascript实现的。想象头部之后有一个箭头，当你点击它时，下面的附加信息将会呈现。再次点击箭头内容消失。FAQ页面中经常使用这个功能。

Details元素允许我们完全抛开Javascript。或者说，它将做到这样，因为浏览器的支持还乏善可陈。

________________________________________

一个示例

现在让我们深入和学习如何使用这个新标签。我们从创建一个新的details元素开始。

</details>

然后，我们需要放入summary的内容。

<details>

<summary> Who Goes to College? </summary>

<p> Your mom. </p>

</details>

好，让我们开始一些更实用的例子。我想要使用details元素显示不同的Nettuts+文章。我们首先为每一篇文章创建一个标记。

<details>

<summary>Dig Into Dojo</summary>

<img src=”http://d2o0t5hpnwv4c1.cloudfront.net/1086_dojo/dojo.jpg” alt=”Dojo” />

<div>

<h3> Dig into Dojo: DOM Basics </h3>

<p>Maybe you saw that tweet: “jQueryis a gateway drug. It leads to full-on JavaScript usage.” Part of that addiction, I contend, is learning other JavaScript frameworks. And that’s what this four-part series on the incredible Dojo Toolkit is all about: taking you to the next level of your JavaScript addiction.

</p>

</div>

</details>

下一步，我们将为它加上简单的样式。

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。