AMP教學-Tab分頁切換

有時網頁裡面會需要有分頁切換區塊內容，平常需要使用JavaScript製作，同樣在AMP中需要使用專屬套件來達成

使用的元件是amp-selector ，這個元件主要是作為切換選擇控制之用。在amp-selector裡面可以包含任何html和amp元件，但不能再包含 amp-selector(選擇區域裡面不能再選擇)。
amp-selector可以達成如區塊(或圖片、輪播、按鈕)選擇與清除，或是做為選項選擇鈕，在許多地方都可以用到。這次著重在如何製作出分頁切換功能，若需要更詳細的解說可參考amp-selector文件

這次我們使用amp-selector來製作分頁(tab)，概念上是在按鈕和區塊上各別設定id，進行呼應的事件，並且輔以css來製作出來。

載入js

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

寫入html，寫法有兩種，可以將按鈕和顯示區塊劃為同一區，或是和選擇按鈕劃分為一區，顯示區塊劃為同一區
範例寫法1-html的寫法是按鈕1+區塊1+按鈕2+區塊2+按鈕3+區塊3....
範例寫法2-html的寫法是按鈕1+按鈕2+按鈕3 和區塊1+區塊2+區塊3...

以下語法為寫法1，按鈕和區塊是在同一處，這種寫法的好處是當到手機上時，tab可以直接變成標題並緊接著內容。

<amp-selector class="tabs-with-flex"
role="tablist">
<!-- 分頁按鈕1 -->
<div id="tab1"
role="tab"
aria-controls="tabpanel1"
option
selected>Tab one</div>
<!-- 分頁區塊1 -->
<div id="tabpanel1"
role="tabpanel"
aria-labelledby="tab1">Tab one content... </div>
<!-- 分頁按鈕2 -->
<div id="tab2"
role="tab"
aria-controls="tabpanel2"
option>Tab two</div>
<!-- 分頁區塊2 -->
<div id="tabpanel2"
role="tabpanel"
aria-labelledby="tab2">Tab two content... </div>
<!-- 分頁按鈕3 -->
<div id="tab3"
role="tab"
aria-controls="tabpanel3"
option>Tab three</div>
<!-- 分頁區塊3 -->
<div id="tabpanel3"
role="tabpanel"
aria-labelledby="tab3">Tab three content... </div></amp-selector>

語法解釋

<!-- 分頁按鈕1 -->
<div id="tab1"
role="tab"
aria-controls="tabpanel1"
option
selected>Tab one</div>
<!-- 分頁區塊1 -->
<div id="tabpanel1"
role="tabpanel"
aria-labelledby="tab1">Tab one content... </div>

注意在Tab與區塊都必須要命名ID，在tab中使用 aria-controls="tabpanel1"呼應區塊1，而在區塊中使用 aria-labelledby="tab1"呼應tab
option 表示該tab可以被選擇

寫入css
css在這個套件裡面很重要，使用flex屬性讓三個div按鈕排列同一列，同時扮演著決定哪一塊按鈕出現的模樣。
主要是使用了選擇器來判斷何時按鈕要進行變化，並且開啟內容區塊，由於牽扯到許多關於css選擇器，因此更多寫法不加以著墨，可自行研究。
css寫法請參考此範例

當css加上後就可以看到效果了

參考:
Tab Panels with amp-selector
amp-selector components
amp-selector example

其他參考範例(電腦版下方有商品切換頁)
https://www.unistyle.tw/amp/