中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

導(dǎo)讀：Tab切換是很多網(wǎng)站必備交互，然而很多論壇教程并不完整，產(chǎn)品小白一步一步照著做，可能仍無(wú)法實(shí)現(xiàn)效果，浪費(fèi)時(shí)間還打擊自信。本文作者基于Axure 9.0版本，對(duì)制作Tab切換的每一個(gè)步驟和細(xì)節(jié)都進(jìn)行了詳細(xì)的講解，與大家分享。

案例要點(diǎn)

1. 通過(guò)動(dòng)態(tài)面板設(shè)置不同頁(yè)面內(nèi)容，n個(gè)tab設(shè)置n個(gè)狀態(tài)；
2. 拖動(dòng)矩形作為按鈕，設(shè)置矩形選中狀態(tài)；
3. 設(shè)置tab按鈕的點(diǎn)擊事件，設(shè)置動(dòng)態(tài)面板的狀態(tài)切換。

詳細(xì)步驟

1、 拖動(dòng)一個(gè)矩形做tab，這里我想做一個(gè)女裝男裝童裝三個(gè)tab切換，先拖動(dòng)一個(gè)矩形，把矩形命名為女裝（給形狀命名習(xí)慣要養(yǎng)成），ps：先拖一個(gè)矩形就好，方便設(shè)置完交互再一波復(fù)制。

2、拖動(dòng)動(dòng)態(tài)面板，給動(dòng)態(tài)面板添加狀態(tài)，做幾個(gè)tab頁(yè)添加幾種狀態(tài)。我這里設(shè)置了女裝、男裝、童裝三種狀態(tài)。（動(dòng)態(tài)面板命名為服裝品類tab）。每種狀態(tài)下放對(duì)應(yīng)的頁(yè)面內(nèi)容，我這里以文字示意。

3、給tab按鈕設(shè)置交互。選中女裝按鈕，點(diǎn)擊交互下的編輯按鈕進(jìn)入交互編輯器。

在編輯器中，添加事件——單擊時(shí)，添加兩個(gè)動(dòng)作：

1. 設(shè)置面板狀態(tài)，目標(biāo)【服裝品類tab】到state【女裝】；
2. 設(shè)置選中，目標(biāo)【當(dāng)前元件】，設(shè)置【值】，到達(dá)【真】。

第一步操作是為了鏈接tab按鈕和動(dòng)態(tài)面板的狀態(tài)，表示單擊女裝按鈕進(jìn)入動(dòng)態(tài)面板女裝頁(yè)面；

第二步操作表示單擊操作時(shí)，該元件狀態(tài)為選中，注意這一步非常重要，只有這樣我們?cè)O(shè)置元件【選中】時(shí)的【交互樣式】才能實(shí)現(xiàn)，比如單擊女裝時(shí)女裝按鈕高亮顯示。

4、單擊形狀屬性旁的顯示全部，給女裝按鈕設(shè)置選項(xiàng)組（名稱可自定義，我這設(shè)置服裝tab組），設(shè)置選項(xiàng)組才能達(dá)成單選目的。

5、設(shè)置按鈕的交互樣式。這里可以設(shè)置懸停、選中、禁用等狀態(tài)的交互樣式。我這里設(shè)置選中時(shí)的樣式為背景填充黃色。與第3步的單擊操作設(shè)置選中結(jié)合，最終形成了單擊按鈕時(shí)黃色高亮的交互。

6、復(fù)制女裝按鈕兩次，修改每個(gè)按鈕對(duì)應(yīng)交互信息，形狀名稱改為男裝/童裝，單擊時(shí)面板狀態(tài)到男裝/童裝。

7、最后一步，設(shè)置按鈕女裝的默認(rèn)狀態(tài)是選中，表示打開時(shí)默認(rèn)選中女裝tab。

最終效果

預(yù)覽一下即大功告成。tab切換也有其他做法，但是動(dòng)態(tài)面板更容易理解，大家可以一試，有問(wèn)題可以在評(píng)論區(qū)交流。

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

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