HTML5教程之details展开收缩标签的应用

details标签的出现,为我们带来了更好的用户体验,不必为这种收缩展开的效果再编写JS来实现。

注:目前仅Chrome支持此标签。

details有一个新增加的子标签——summary,当鼠标点击summary标签中的内容文字时,details标签中的其他所有元素将会展开或收缩。

detalis标签:

案例1:

  1. <!DOCTYPE HTML> 
  2. <html> 
  3.     <head> 
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  5.         <title>HTML5每日一练之details展开收缩标签的应用</title> 
  6.     </head> 
  7.     
  8.     <body> 
  9.         <details> 
  10.                 <summary>HTML5|CSS3|论坛 | 前端开发网(W3Cfuns.com)!</summary> 
  11.                 <p>HTML5论坛,CSS3论坛,CSS论坛,WEB前端开发论坛,教程资源完全免费的CSS论坛,打造最好的HTML5/CSS3论坛</p> 
  12.         </detalis> 
  13.     </body> 
  14. </html> 

如果details中不存在summary标签会怎样呢,其实当details元素内没有summary标签的时候,浏览器在解析的时候会提供一个默认的文字,比如“查看详细”诸如此类的本地化文字,浏览器同样再会提供一个诸如上下箭头之类的图标。比如下面的案例2就是一个不存在summary子标签的例子:

  1. 案例2: 
  2. <!DOCTYPE HTML> 
  3. <html> 
  4.     <head> 
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  6.         <title>HTML5每日一练之details展开收缩标签的应用</title> 
  7.     </head> 
  8.     
  9.     <body> 
  10.         <details> 
  11.                 <p>HTML5论坛,CSS3论坛,CSS论坛,WEB前端开发论坛,教程资源完全免费的CSS论坛,打造最好的HTML5/CSS3论坛</p> 
  12.         </details> 
  13.     </body> 
  14. </html> 

有的时候,我们需要detalis中的内容默认为展开状态怎么办?

其实HTML5也已经为我们想到了,如果有着方面的需求,我们只需要加入一个属性即可,如案例3。

Open属性:

将案例1的代码修改后如下:

案例3:

  1. <!DOCTYPE HTML> 
  2. <html> 
  3.     <head> 
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  5.         <title>HTML5每日一练之details展开收缩标签的应用</title> 
  6.     </head> 
  7.     
  8.     <body> 
  9.         <details open> 
  10.                 <summary>HTML5|CSS3|论坛 | 前端开发网(W3Cfuns.com)!</summary> 
  11.                 <p>HTML5论坛,CSS3论坛,CSS论坛,WEB前端开发论坛,教程资源完全免费的CSS论坛,打造最好的HTML5/CSS3论坛</p> 
  12.         </details> 
  13.     </body> 
  14. </html> 

由此可见,HTML5为我们的确带来了很大方便。 

转载请注明:代码家园 » HTML5教程之details展开收缩标签的应用

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)