- Framework7教程
- Framework7 - 主页
- Framework7 - 概述
- Framework7 - 环境
- Framework7 组件
- Framework7 - 布局
- Framework7 - 导航栏
- Framework7 - 工具栏
- Framework7 - 搜索栏
- Framework7 - 状态栏
- Framework7 - 侧面板
- Framework7 - 内容块
- Framework7 - 布局网格
- Framework7 - 覆盖层
- Framework7 - 预加载器
- Framework7 - 进度条
- Framework7 - 列表视图
- Framework7 - 手风琴
- Framework7 - 卡片
- Framework7 - 芯片
- Framework7 - 按钮
- Framework7 - 操作按钮
- Framework7 - 表格
- Framework7 - 选项卡
- Framework7 - Swiper 滑块
- Framework7 - 照片浏览器
- Framework7 - 自动完成
- Framework7 - 选择器
- Framework7 - 日历
- Framework7 - 刷新
- Framework7 - 无限滚动
- Framework7 - 消息
- Framework7 - 消息栏
- Framework7 - 通知
- Framework7 - 延迟加载
- Framework7 样式
- Framework7 - 颜色主题
- Framework7 - 细线
- Framework7 模板
- Framework7 - 模板概述
- Framework7 - 自动编译
- Framework7 - Template7 页面
- Framework7 快速点击
- Framework7 - 活动状态
- Framework7 - 点击保持事件
- Framework7 - 触摸波纹
- Framework7 有用的资源
- Framework7 - 快速指南
- Framework7 - 有用的资源
- Framework7 - 讨论
Framework7 - 活动状态
描述
当您点击链接和按钮时,它们会突出显示。这是通过Framework7 中的活动状态完成的。
- 它的Behave就像一个本机应用程序,而不是一个网络应用程序。
- 它有一个内置的快速点击库,应该启用它。
- active-state类与 CSS :active选择器相同。
- 通过将watch-active-state类添加到<html>元素来启用活动状态。
以下代码用于 CSS 样式的活动状态 -
/* Usual state */ .my-button { color: red; } /* Active/tapped state */ .my-button.active-state { color: blue; }
以下代码显示了禁用活动状态或快速单击时的后备兼容性 -
/* Usual state */ .my-button { color: red; } /* Active/tapped state */ .my-button.active-state { color: blue; } /* Fallback, when active state is disabled */ html:not(.watch-active-state) .my-button:active { color: blue; }