一、頁面布局

（1）從左側(cè)元件庫拉入兩個矩形作為導(dǎo)航按鈕，分別命名為：頁面1、頁面2。

（2）從左側(cè)元件庫拉入一個動態(tài)面板作為頁面內(nèi)容展示，命名為頁面內(nèi)容。

（3）雙擊動態(tài)面板，點(diǎn)擊“+”，添加狀態(tài)2；再分別點(diǎn)擊對應(yīng)的狀態(tài)，往里面添加任意頁面內(nèi)容。

二、添加交互

（1）按住shift鍵，選中兩個導(dǎo)航按鈕，鼠標(biāo)右鍵，選中【交互樣式】。

（2）設(shè)置選中樣式：字體顏色為白色，填充色為藍(lán)色。

（3）選中導(dǎo)航按鈕【頁面1】；雙擊右側(cè)“屬性”欄中的【鼠標(biāo)點(diǎn)擊時】。

（4）選擇【設(shè)置面板狀態(tài)】->勾選【頁面內(nèi)容動態(tài)面板】->選擇【狀態(tài)1】。

再點(diǎn)擊【設(shè)置選中】-》勾選導(dǎo)航組中的【頁面1】按鈕。

（5）選中導(dǎo)航按鈕【頁面2】；雙擊右側(cè)“屬性”欄中的【鼠標(biāo)點(diǎn)擊時】，重復(fù)上面步驟；選擇【設(shè)置面板狀態(tài)】-》勾選【頁面內(nèi)容動態(tài)面板】-選擇【狀態(tài)2】；再點(diǎn)擊【設(shè)置選中】-》勾選導(dǎo)航組中的【頁面2】按鈕。

三、交互細(xì)節(jié)調(diào)整

（1）按住shift鍵，選中兩個導(dǎo)航按鈕，鼠標(biāo)右鍵，選中【設(shè)置選項組】。主要為了實現(xiàn)，點(diǎn)擊選中【頁面1】按鈕選中時，【頁面2】按鈕則自動變?yōu)椴贿x中。

（2）頁面剛加載時，先展示頁面1，所以，導(dǎo)航按鈕【頁面1】的初始狀態(tài)應(yīng)該為選中；因此，選中導(dǎo)航按鈕【頁面1】，點(diǎn)擊右側(cè)屬性欄，勾選【選中】。

四、預(yù)覽效果