HTML5教程之details展开收缩标签的应用
来源:互联网 发布:竞价软件哪个好 编辑:程序博客网 时间:2024/05/18 18:45
HTML5教程之details展开收缩标签的应用
details标签的出现,为我们带来了更好的用户体验,不必为这种收缩展开的效果再编写JS来实现。
注:目前仅Chrome支持此标签。
details有一个新增加的子标签——summary,当鼠标点击summary标签中的内容文字时,details标签中的其他所有元素将会展开或收缩。
detalis标签:
案例1:
如果details中不存在summary标签会怎样呢,其实当details元素内没有summary标签的时候,浏览器在解析的时候会提供一个默认的文字,比如“查看详细”诸如此类的本地化文字,浏览器同样再会提供一个诸如上下箭头之类的图标。比如下面的案例2就是一个不存在summary子标签的例子:
有的时候,我们需要detalis中的内容默认为展开状态怎么办?
其实HTML5也已经为我们想到了,如果有着方面的需求,我们只需要加入一个属性即可,如案例3。
Open属性:
将案例1的代码修改后如下:
案例3:
由此可见,HTML5为我们的确带来了很大方便。
本文由 JS代码站 收集改动或原创丨www.sitejs.cn | 转载 请标明出处
本文原地址:http://www.sitejs.cn/sitejs-12740-1.html
阅读全文
1 0
- HTML5教程之details展开收缩标签的应用
- HTML5教程之details展开收缩标签的应用
- HTML5教程之details展开收缩标签的应用
- HTML5教程之video标签的应用
- HTML5教程之progress标签的应用
- HTML5教程之mark标签的应用
- HTML5教程之figure标签的应用
- HTML5教程之音频Audio标签应用
- HTML5教程-meter标签的应用
- 展开收缩的层
- 信息的展开、收缩
- HTML5 <details> 标签
- HTML5之音频Audio标签的应用
- 层的展开收缩效果
- 布局展开收缩的动画
- Android之可收缩展开列表ExpandableList
- HTML5 的<details>
- 一个表格收缩展开的函数
- 统计语言模型
- bzoj2330 [SCOI2011]糖果(差分约束+spfa)
- 【HDU 3966 】Aragorn's Story 【树链剖分 基于点权,查询单点值,修改路径上的点权】
- cs231n作业配置
- 嵌入式多路温湿度监控系统(八网络客户端程序)
- HTML5教程之details展开收缩标签的应用
- HDU 5029Relief grain(树链剖分+线段树)
- 设计模式之Builder模式的简单实现
- sizeof使用规则及陷阱分析
- 数据结构——第三讲、树(上)(3)
- 常用的svn和git命令
- 自考之数据结构思维导图
- javaBean验证框架(4)—自定义约束
- opencv中加入contrib模块