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

1 選項卡使用

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

縱向選項卡的使用與橫向選項卡類似，添加縱向選項卡然后設計選項內元素即可，縱向選項卡的差異是每一項的寬度是固定的。

2 自定義選項卡切換

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

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

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

3 選項卡設計高級下拉導航

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