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

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

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

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

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

B端产品经理的能力模型与学习提升

B端产品经理面临的第一大挑战，是如何正确的分析诊断业务问题。 这也是最难的部分，产品设计知识对这部分工作基本没有帮助，如果想做好业务分析诊断，必须具备扎实 ...

查看详情 >

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

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

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

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

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

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

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

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

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