下面這篇文章是筆者整理分享的關于Axure教程中tab頁簽的相關內(nèi)容，對Axure感興趣的同學可以進來了解了解吧！

最近畫原型圖使用比較多的一個組件形式——tab頁簽，之前一直用多個動態(tài)面板來設置tab頁簽的選中和未選中狀態(tài)，比較復雜且麻煩，最近發(fā)現(xiàn)了一個簡單便捷的方法，分享給大家，先展示一下最終效果，感興趣的就一起來試一下吧~

首先我們先畫幾個矩形，分別寫上頁簽名稱（我這里就直接寫頁簽1234），當前矩形的樣式就是你頁簽未選中狀態(tài)下的樣子（我這里是無邊框+黑色字體，大家可以根據(jù)自己的需求設置）。

我們選中添加的幾個頁簽，在右側(cè)【交互】欄，點擊【顯示全部】會出現(xiàn)一個【選項組】，我們給這個選項組命名（我這里就起名“tab頁簽”）。

現(xiàn)在給每個頁簽設置選中效果，選擇一個頁簽，在右側(cè)【交互】欄，【交互樣式】選擇【元件選中樣式】進行樣式的編輯，我這邊是希望選中的元件文字顏色改變，并且下方會出現(xiàn)選擇線，將每一個頁簽都設置選中樣式，可以直接復制粘貼。

具體操作如下圖，可參考。

如果還想鼠標懸停的時候也有相應效果，也可以參照上一條進行【鼠標懸停樣式】編輯。

現(xiàn)在需要的就是在每次點擊到對應的元件時，元件為選中狀態(tài)：選擇元件，在右側(cè)【交互】欄新建交互，選擇【單擊時】-【設置選中】-【當前元件值為真】，將每一個頁簽都設置選中交互，可以直接復制粘貼，具體操作如下圖，可參考。

其實到這一步我們的效果已經(jīng)出來了。

但是感覺好像缺了點啥，按理說我進入這個頁面應該會有一個默認選中的tab頁簽，這個時候我們就需要對頁面載入時默認選中的tab頁簽添加一個交互了：在右側(cè)【交互】欄新建交互，選擇【載入時】-【設置選中】-【當前元件值為真】。

上一步完成之后效果如下，頁面載入時就會默認選中第一個tab頁簽。

這個時候搭配一個動態(tài)面板，就可以實現(xiàn)切換tab頁簽，展示不同的內(nèi)容了，我們添加一個動態(tài)面板（我這里命名為內(nèi)容展示），新增4個state，分別命名為1234，每個state內(nèi)放入對應需要展示的內(nèi)容。

接下來我們添加對應的交互就ok了。

完成啦，現(xiàn)在來看一下最終效果吧~