活动状态

Framework7 使用所谓的“活动状态”来突出显示您点击时的链接和按钮。这样做是为了使 Framework7 应用程序的行为像本机应用程序，而不是网络应用程序。

它的工作方式几乎与 CSS :active 选择器相同，当您点击链接和按钮时，它会向其添加 active-state 类。唯一的区别是它会在一段延时间隔后才添加此类，这可以防止页面滚动期间出现虚假高亮。

因此，当您编写 CSS 样式时，您应该像下面这样编写活动状态

/* Usual state */
.my-button {
    color: red;
}
/* Active/tapped state */
.my-button.active-state {
    color: blue;
}

您可以在 touch.activeStateElements 应用参数 中控制哪些元素将接收 active-state 类。

在某些情况下，您可能有多个嵌套的活动状态元素。您可以通过将 prevent-active-state-propagation 类添加到子活动状态元素来阻止在父元素上设置活动状态

<div class="card card-expandable">
  <div class="card-content">
    <!-- Tap on button will prevent setting active-state on parent card -->
    <a class="button prevent-active-state-propagation">...</a>
  </div>
</div>

要禁用在元素本身（及其子元素）上设置活动状态类，我们需要向这样的元素添加 no-active-state 类

<!-- link without active-state -->
<a href="..." class="link no-active-state">...</a>