上篇講解了如何制作簡(jiǎn)單的側(cè)邊欄及跳轉(zhuǎn)的交互，這一篇中，筆者將講解：如何在跳轉(zhuǎn)后保持側(cè)邊欄已有的展開(kāi)狀態(tài)，以及通過(guò)字體顏色變化表示當(dāng)前所在頁(yè)面。

1.選擇P1+P2矩形，雙擊右側(cè)檢視，屬性，交互，鼠標(biāo)單擊時(shí)的Case1

2.點(diǎn)擊切換選中狀態(tài)，選擇當(dāng)前元件，確定

3.選擇P1+P2矩形，右側(cè)屬性，交互樣式設(shè)置，點(diǎn)擊選中

4.填充顏色選黃色，確定

5.雙擊右側(cè)概要，P1+P2DT動(dòng)態(tài)面板下的State1，進(jìn)入該頁(yè)面

6.點(diǎn)擊P1單元格，右側(cè)屬性，交互樣式設(shè)置，選中

7.字體顏色選橙色，確定

8.同樣將P2單元格選中的交互樣式設(shè)置為字體顏色橙色

9.雙擊左側(cè)側(cè)邊欄母版，回到側(cè)邊欄母版首頁(yè)，然后點(diǎn)擊布局，管理母版觸發(fā)事件

10.點(diǎn)擊加號(hào)，新增自定義事件，取名為PageC

11.雙擊右側(cè)概要，P1+P2DT動(dòng)態(tài)面板下的State1，進(jìn)入該頁(yè)面

12.單擊空白處，在右側(cè)檢視，屬性，點(diǎn)擊載入時(shí)

13.點(diǎn)擊自定義事件，選中PageC，確定

14.雙擊左側(cè)New Page1頁(yè)面

15.點(diǎn)擊New Page1中的側(cè)邊欄母版區(qū)域，右側(cè)檢視，屬性，交互，單擊PageC

16.設(shè)置面板狀態(tài)，選擇P1+P2DT動(dòng)態(tài)面板，選中如果隱藏則顯示面板，推動(dòng)/拉動(dòng)元件。確定

17.設(shè)置選中，選擇P1單元格，確定

18.設(shè)置選中，選擇P1+P2矩形，確定

19.同理，進(jìn)入New Page2頁(yè)面，對(duì)New Page2中的側(cè)邊欄區(qū)域，設(shè)置P1+P2DT動(dòng)態(tài)面板為如果隱藏則顯示面板，推動(dòng)/拉動(dòng)元件；設(shè)置選中P2單元格，設(shè)置選中P1+P2矩形，確定

此時(shí)預(yù)覽，即可看到以下效果

• 點(diǎn)擊跳轉(zhuǎn)到P1頁(yè)面時(shí)，側(cè)邊欄的P1+P2為打開(kāi)狀態(tài)，顏色為黃色，P1單元格字體為橙色，表示當(dāng)前頁(yè)面為P1+P2下的P1頁(yè)面；
• 點(diǎn)擊跳轉(zhuǎn)到P2頁(yè)面時(shí)，側(cè)邊欄P1+P2為打開(kāi)狀態(tài)，顏色為黃色，P2單元格字體為橙色，表示當(dāng)前頁(yè)面為P1+P2下的P2頁(yè)面。

本文由 @落塵 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Unsplash ，基于 CC0 協(xié)議