[AMP] 使用 amp-bind 來製作切換 class name 的功能

分享:

要在 AMP 裡製作切換 class name 的功能以達成某些效果,可以使用 amp-bind 提供的方法,首先要先將 js 讀進來:

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js">

 

接著在要動態切換樣社的標籤上加上 [class] 並指定變數:

<div class="background-red" [class]="myClass">Hello World</div>
<button on="tap:AMP.setState({ myClass: 'background-green' })">Change class</button>

這樣當按下按鈕,就會把目標的 class 從 background-red 改成 background-green,如果要保留或切換多個 class name,可用空字串隔開,例如:

<button on="tap:AMP.setState({ myClass: 'background-green active' })">Change class</button>

這樣就能利用 amp 提供的方法來切換 class 名稱進而改變樣式了。

課程推薦

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。