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

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

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

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

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

做了8年产品经理后，我是这么看产品经理的

我个人是从非常初级的产品经理做起，再到负责一个大产品的项目管理，现在有幸跳出了日常基础的工作更多的去看产品的PMF，product strategy...

查看详情 >

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

如果還想鼠標(biāo)懸停的時候也有相應(yīng)效果，也可以參照上一條進(jìn)行【鼠標(biāo)懸停樣式】編輯。

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

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

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

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

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

接下來我們添加對應(yīng)的交互就ok了。

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