zoukankan      html  css  js  c++  java

  • 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子标签的例子。




    案例2：

    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.                 <p>HTML5论坛,CSS3论坛,CSS论坛,WEB前端开发论坛,教程资源完全免费的CSS论坛，打造最好的HTML5/CSS3论坛</p>
    11.         </details>
    12.     </body>
    13. </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为我们的确带来了很大方便。
  • 相关阅读:
    云原生 Serverless Database 使用体验
    如何画一张架构图（内含知识图谱）
    阿里云 Serverless Kubernetes 的落地实践分享
    【阿里云 CDP 公开课】 第二讲：CDH/HDP 何去何从
    阿里云数据治理系列（一）：治理项目启动前的必答三问
    使用递归方法全选/反选TreeView中CheckBox子节点
    C# 安装部署项目 【转】
    HashTable存储树形数据
    Delphi中MessageBox用法【转】
    js nextSibling属性和previousSibling属性
  • 原文地址：https://www.cnblogs.com/liweitao/p/3852699.html
Copyright © 2011-2022 走看看