導讀：Tab切換是很多網(wǎng)站必備交互，然而很多論壇教程并不完整，產(chǎn)品小白一步一步照著做，可能仍無法實現(xiàn)效果，浪費時間還打擊自信。本文作者基于Axure 9.0版本，對制作Tab切換的每一個步驟和細節(jié)都進行了詳細的講解，與大家分享。

案例要點

1. 通過動態(tài)面板設置不同頁面內(nèi)容，n個tab設置n個狀態(tài)；
2. 拖動矩形作為按鈕，設置矩形選中狀態(tài)；
3. 設置tab按鈕的點擊事件，設置動態(tài)面板的狀態(tài)切換。

詳細步驟

1、 拖動一個矩形做tab，這里我想做一個女裝男裝童裝三個tab切換，先拖動一個矩形，把矩形命名為女裝（給形狀命名習慣要養(yǎng)成），ps：先拖一個矩形就好，方便設置完交互再一波復制。

2、拖動動態(tài)面板，給動態(tài)面板添加狀態(tài)，做幾個tab頁添加幾種狀態(tài)。我這里設置了女裝、男裝、童裝三種狀態(tài)。（動態(tài)面板命名為服裝品類tab）。每種狀態(tài)下放對應的頁面內(nèi)容，我這里以文字示意。

3、給tab按鈕設置交互。選中女裝按鈕，點擊交互下的編輯按鈕進入交互編輯器。

在編輯器中，添加事件——單擊時，添加兩個動作：

1. 設置面板狀態(tài)，目標【服裝品類tab】到state【女裝】；
2. 設置選中，目標【當前元件】，設置【值】，到達【真】。

第一步操作是為了鏈接tab按鈕和動態(tài)面板的狀態(tài)，表示單擊女裝按鈕進入動態(tài)面板女裝頁面；

第二步操作表示單擊操作時，該元件狀態(tài)為選中，注意這一步非常重要，只有這樣我們設置元件【選中】時的【交互樣式】才能實現(xiàn)，比如單擊女裝時女裝按鈕高亮顯示。

4、單擊形狀屬性旁的顯示全部，給女裝按鈕設置選項組（名稱可自定義，我這設置服裝tab組），設置選項組才能達成單選目的。

5、設置按鈕的交互樣式。這里可以設置懸停、選中、禁用等狀態(tài)的交互樣式。我這里設置選中時的樣式為背景填充黃色。與第3步的單擊操作設置選中結合，最終形成了單擊按鈕時黃色高亮的交互。

6、復制女裝按鈕兩次，修改每個按鈕對應交互信息，形狀名稱改為男裝/童裝，單擊時面板狀態(tài)到男裝/童裝。

7、最后一步，設置按鈕女裝的默認狀態(tài)是選中，表示打開時默認選中女裝tab。

最終效果

預覽一下即大功告成。tab切換也有其他做法，但是動態(tài)面板更容易理解，大家可以一試，有問題可以在評論區(qū)交流。

本文由 @西瓜湯圓 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協(xié)議。