這幾天用Axure畫原型圖的過程中，須要實現Tab選項卡切換的效果，但Axure中并沒有類似于Tab控件的部件，所以能夠用Axure中的動態面板(Dynamic Panel)來實現。

本文以已經漢化的Axure7.0為例。英語不太好的朋友能夠先進行漢化（漢化的時候要注意版本號。不同的版本號。漢化文件也稍有差異）。

詳細實現過程例如以下：

1、往頁面中拖入一個動態面板部件；

2、給該動態面板部件加入幾個狀態；

操作方法為：雙擊該動態面板，點擊左側的加號加入狀態。這里把四個加入的狀態名稱改為“選項卡1、選項卡2……”

單擊確定，此動態面板就擁有了4個狀態。每一個狀態分別相應一個選項卡頁面：

<img src="http://img.blog.csdn.net/20141116182458475?

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaHV5dXlhbmc2Njg4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

3、編輯每一個狀態（選項卡）的頁面內容（這里能夠先在選項卡1中編輯每一個選項卡中的公共內容）。雙擊選項卡1。進入對狀態的編輯頁面，向頁面中拖入一個矩形（作為選項卡的主體面板）和4個圖片控件：

<img src="http://img.blog.csdn.net/20141116184412487?

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaHV5dXlhbmc2Njg4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

這里為了顯示效果，做了四張作為選項卡表頭的圖片，四張圖片底部都沒有邊框：

<img src="http://img.blog.csdn.net/20141116184125894?

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaHV5dXlhbmc2Njg4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

將這四張圖片上傳后調整圖片與矩形的位置（讓矩形的上邊框擋住四張圖片的下邊框）與層次（將矩形置于頂層），直至效果為：

再將選項卡1的層次置于頂層，為了標識，矩形中拖入須要在選項卡1中放置的內容（這里拖入一個單行文本）：

此時的頁面就達到了選項卡1的效果，然后均依照此方法改動選項卡2、選項卡3、選項卡4。每一個選項卡（也就是狀態）中矩形中的內容就是每一個選項卡要顯示的主體內容。

4、設置選項卡之間的動態跳轉：

在選項卡1中，點擊圖片選項卡1。為它加入鼠標單擊事件

<img src="http://img.blog.csdn.net/20141116211939171?

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaHV5dXlhbmc2Njg4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

新增動作為動態面板下的“設置面板狀態”，動作為設置狀態到選項卡1，例如以下圖：

此時，執行一下就能夠實現點擊“選項卡1”就切換到選項卡1的面板的效果，相同方法設置其它三個button。

小技巧

上例的四個選項卡就是動態面板的四個狀態，這幾個狀態有一些公共的內容，比方選項卡的四個button（即上例中的四張圖片）和各個button對應的單擊事件，所以為了高效省時，能夠先做出一個選項卡的內容來，然后能夠直接將這個選項卡的公共內容部分拷貝到其它選項卡中。這樣也能夠避免位置調整不佳而導致點擊每一個選項卡切換時會來回“跳動”（在Axure中從一處復制內容到還有一處時。內容本身的屬性、事件、坐標等性質均不變）。

如今在Axure的官網上也能夠下載tab控件的插件。當中不乏一些功能強大的、美觀大氣的控件哦。點擊跳到下載頁面

總結

以上是生活随笔為你收集整理的Axure实现Tab选项卡切换功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。