本文分享了在Axure中巧用交互樣式實現多tab切換效果的方法，希望對大家有幫助。

先看效果:

步驟:

第1步，先準備三個矩形。

• 1個內容（結果）展示區域
• 2個tab緊挨著內容區域

第2步設置默認樣式。

（1）設置內容與兩個背景的顏色一致 —— 選中時溶為一體。

（2）設置內容區域的邊框顏色為0099FF —— 后期設置tab選中樣式時要用到。

（3）設置tab的邊框線寬為3、線段顏色為全透明（不透明度：0） —— 與后面設置的tab選中樣式形成對比，視覺上選中之后變大了。

設置好之后的效果是這樣：

第3步設置tab的交互效果。

（1）右鍵元件，菜單中選擇“交互樣式”。

（2）進入交互樣式設置，設置選中后的效果。

• 線段顏色，設置為0099FF —— 與內容區域一樣。
• 線寬，設置為1 —— 選中后放大效果（原來被透明邊框占去了3像素，現在只占1像素（還不透明），視覺上變大了）。
• 邊框可見線設置為最下邊不顯示邊框 —— 目的與內容區域溶合。

第4步，設置層級，及位置。

（1）內容區域置于最低層 —— 不然內容區域的邊線一直可見，不能溶為一體——這也是要把tab的邊線（默認）設置為透明的原因之一。

（2）將tab下移1像素 ——（選中時）正好可以蓋在內容區域的邊線上，從而實現溶為一體。

第5步，設置動作。

點擊tab時，完成以下動作：

（1）設置點擊tab位于頂層 —— 再次保證不是其他元件蓋著。

（2）設置內容區域文字 —— 從內容上體現選中了這一塊。注：2個tab要設置不同的文字（進階方案：使用this.text實現）。

（3）設置當前元件為選中狀態 —— 用到前面設置的交互樣式了。

第6步，設置選項組、設置默認選中項。

（1）tab之間是只能選中一個的，所以需要將這兩個tab設置為同一個選項組（實現單選效果）。

注：先項組的名稱可隨意取。

（2）設置默認選中項 —— 因為內容區域顯示的內容是由tab來決定的，如果兩個都是未選中的，則內容區域什么都不顯示，固需要有一個默認選中項。這里設置的是左邊為默認選中項。

OK，全部完成，伸伸懶腰，點擊F5，就可以看到效果了。

原型鏈接：多tab切換效果?，歡迎下載交流。

本文由 @牧逸 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Pexels ，基于 CC0 協議