HTML – AMP：切换CSS类的简单方法？

发布时间：2020-12-14 21:15:28 所属栏目：资源来源：网络整理

导读：我正在构建一个加速移动页面(AMP)模板,并想知道是否有一种简单的方法可以在选项卡上切换CSS类. 我知道的事情如下： h2 class="headline" on="tap:list.toggleVisibility"ul id="list"/ul 但这会写入内联样式 – 我宁愿切换自定义CSS类,但却无法在AMP页面上找

我正在构建一个加速移动页面(AMP)模板,并想知道是否有一种简单的方法可以在选项卡上切换CSS类.

我知道的事情如下：

<h2 
  class="headline"
  on="tap:list.toggleVisibility"
>
<ul id="list"></ul>

但这会写入内联样式 – 我宁愿切换自定义CSS类,但却无法在AMP页面上找到示例.

带有< h2 [class] =“myclasses”>等绑定的AMP.setState看起来像是要走的路,但操纵状态对他们给你的工具来说相当困难……

解决方法

这可以通过 amp-bind完成.您可以使用隐式状态变量,例如可见,跟踪当前状态.这是一个切换两个类显示和隐藏的示例：

<button [text]="visible ? 'Show Less' : 'Show More'" 
           on="tap:AMP.setState({visible: !visible})">
    Show More
  </button>
  <p [class]="visible ? 'show' : 'hide'" class="hide">
    Some more content.
  </p>

Full sample on JSBIN

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!