網(wǎng)站里選項(xiàng)卡使用很廣泛，例如百度智能云官網(wǎng)就大量使用了選項(xiàng)卡切換交互，使用選項(xiàng)卡能更友好的展示信息，提供更好的用戶體驗(yàn)。

1 選項(xiàng)卡使用

添加空白自由版塊，拖拽元素 -> 容器 -> 橫向選項(xiàng)卡到空白版塊中，選項(xiàng)卡是高級容器，每一個選項(xiàng)卡內(nèi)部的元素編輯與普通容器內(nèi)編輯一致，通過箭頭上下切換選項(xiàng)卡項(xiàng)，進(jìn)入設(shè)置和樣式給選項(xiàng)卡設(shè)計(jì)樣式及標(biāo)題等設(shè)置。

縱向選項(xiàng)卡的使用與橫向選項(xiàng)卡類似，添加縱向選項(xiàng)卡然后設(shè)計(jì)選項(xiàng)內(nèi)元素即可，縱向選項(xiàng)卡的差異是每一項(xiàng)的寬度是固定的。

2 自定義選項(xiàng)卡切換

除了選項(xiàng)卡自帶的切換效果，可以借助視圖控制搭配其他元素來實(shí)現(xiàn)更豐富的切換支持。首先去除標(biāo)簽的標(biāo)題和圖標(biāo)以及頂部邊框隱藏默認(rèn)自帶的選項(xiàng)卡頭部

添加支持點(diǎn)擊交互的元素，考慮到需要添加激活狀態(tài)，推薦使用菜單元素里面的橫向多行帶圖標(biāo)菜單，給每個菜單項(xiàng)設(shè)置點(diǎn)擊交互，選擇視圖控制并配置激活選項(xiàng)卡對應(yīng)的幀數(shù)，配置好后預(yù)覽點(diǎn)擊菜單就能自動切換選項(xiàng)卡了。

除此之外也可以使用按鈕、圖片等支持點(diǎn)擊交互的元素來控制選項(xiàng)卡，例如添加左右箭頭圖標(biāo)就能實(shí)現(xiàn)與輪播元素類似的效果。

3 選項(xiàng)卡設(shè)計(jì)高級下拉導(dǎo)航

選項(xiàng)卡除了顯示頁面內(nèi)容，也可以加到自由導(dǎo)航中設(shè)計(jì)網(wǎng)站高級下拉菜單，選項(xiàng)卡設(shè)計(jì)好每項(xiàng)內(nèi)容后，添加到導(dǎo)航版塊合適位置，然后開啟默認(rèn)不激活及超出隱藏即可。由于選項(xiàng)卡是通用容器，因此下拉菜單中可以任意定制下拉效果，而且每個下拉菜單設(shè)計(jì)不一樣的效果，例如如下用戶使用示例：