HTML5教程之details展開收縮標籤的應用
details標籤的出現,爲我們帶來了更好的用戶體驗,不必爲這種收縮展開的效果再編寫JS來實現。
注:目前僅Chrome支持此標籤。
details有一個新增加的子標籤——summary,當鼠標點擊summary標籤中的內容文字時,details標籤中的其他所有元素將會展開或收縮。
detalis標籤:
案例1:
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>HTML5每日一練之details展開收縮標籤的應用</title>
- </head>
-
- <body>
- <details>
- <summary>HTML5|CSS3|論壇 | 前端開發網(W3Cfuns.com)!</summary>
- <p>HTML5論壇,CSS3論壇,CSS論壇,WEB前端開發論壇,教程資源完全免費的CSS論壇,打造最好的HTML5/CSS3論壇</p>
- </detalis>
- </body>
- </html>
如果details中不存在summary標籤會怎樣呢,其實當details元素內沒有summary標籤的時候,瀏覽器在解析的時候會提供一個默認的文字,比如“查看詳細”諸如此類的本地化文字,瀏覽器同樣再會提供一個諸如上下箭頭之類的圖標。比如下面的案例2就是一個不存在summary子標籤的例子:
- 案例2:
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>HTML5每日一練之details展開收縮標籤的應用</title>
- </head>
-
- <body>
- <details>
- <p>HTML5論壇,CSS3論壇,CSS論壇,WEB前端開發論壇,教程資源完全免費的CSS論壇,打造最好的HTML5/CSS3論壇</p>
- </details>
- </body>
- </html>
有的時候,我們需要detalis中的內容默認爲展開狀態怎麼辦?
其實HTML5也已經爲我們想到了,如果有着方面的需求,我們只需要加入一個屬性即可,如案例3。
Open屬性:
將案例1的代碼修改後如下:
案例3:
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>HTML5每日一練之details展開收縮標籤的應用</title>
- </head>
-
- <body>
- <details open>
- <summary>HTML5|CSS3|論壇 | 前端開發網(W3Cfuns.com)!</summary>
- <p>HTML5論壇,CSS3論壇,CSS論壇,WEB前端開發論壇,教程資源完全免費的CSS論壇,打造最好的HTML5/CSS3論壇</p>
- </details>
- </body>
- </html>
由此可見,HTML5爲我們的確帶來了很大方便。
本文由 JS代碼站 收集改動或原創丨www.sitejs.cn | 轉載 請標明出處
本文原地址:http://www.sitejs.cn/sitejs-12740-1.html