無論做web段還是移動(dòng)端，常常會(huì)用到動(dòng)態(tài)面板固定在某個(gè)區(qū)域來變換內(nèi)容，達(dá)到節(jié)省空間的作用，今天分享的就是如何實(shí)現(xiàn)這種方式。

預(yù)覽效果：

一、元件準(zhǔn)備

以IT/互聯(lián)網(wǎng)、設(shè)計(jì)創(chuàng)作、職場(chǎng)金融這三組為例，所涉及到的元件分別為it1(小豎條矩形)、it(標(biāo)識(shí)”IT/互聯(lián)網(wǎng)”矩形)、 design1(小豎條矩形)、design(標(biāo)識(shí)“設(shè)計(jì)創(chuàng)作”矩形)、 finance1(小豎條矩形)、finance(標(biāo)識(shí)“職場(chǎng)/金融”矩形)以及最后的動(dòng)態(tài)面板neirong(分為三組，名稱分別對(duì)應(yīng)it、design、finance)。

注：小豎條矩形默認(rèn)顏色是灰色的，這里填充顏色只是為了看清楚。

二、添加事件

1，將三個(gè)小豎條矩形設(shè)置選項(xiàng)組，名稱為“標(biāo)記”，并且分別添加選中事件：填充顏色 #2CC27B。

2，將三個(gè)矩形設(shè)置選項(xiàng)組，名稱為“課程”，并且分別添加選中事件：填充顏色 白色。

釋：這里設(shè)置選項(xiàng)組的目的是為了當(dāng)點(diǎn)擊其中一個(gè)為選中時(shí)，其他兩個(gè)就會(huì)變?yōu)椴贿x中。

3，鼠標(biāo)單擊 “it(IT/互聯(lián)網(wǎng))” 設(shè)置動(dòng)態(tài)面板neirong ，選擇狀態(tài) Value，狀態(tài)名稱 [[this.name]]；

選中 it1和it。

將it的鼠標(biāo)單擊事件復(fù)制然后粘貼到“desgin(藝術(shù)設(shè)計(jì))”、finance(職業(yè)/金融)，且分別將選中對(duì)應(yīng)改為 design1和design、finance1和finance。

4，針對(duì)上下拖動(dòng)動(dòng)態(tài)面板而不超出框架這一實(shí)現(xiàn)方式可以參考上一期的?Axure8.0｜移動(dòng)端上下滑動(dòng)不出屏??。

三、效果

作者：樂悠悠，QQ：714226583，產(chǎn)品新人，目前在找工作。

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

給作者打賞，鼓勵(lì)TA抓緊創(chuàng)作！贊賞

2人打賞

總結(jié)

以上是生活随笔為你收集整理的axure选中后横线切换_Axure8.0｜动态面板内容简单切换技巧的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。