次我們來講解一個在動態面板里面切換標簽的效果。

一、準備元件

1.首先打開一下Axure新建文件，拖取一個矩形，設置長度：375 px ，高度：50 px ；

2.然后輸入文本標簽，這里的字體大小我們給它設置為14 px ，先把它置灰，這里我的字體色值為 #999999 ；

3.最后我們加一個小黑條，脫出一個矩形，設置長度：40 px ，高度：2 px 。給它名為小黑條。

以上樣式我是按照常規移動端尺寸做的，不用說每個尺寸都跟我一樣，只要保存美觀即可。

好的，完成之前我們會得到以下的樣子：

二、設置文本的交互樣式

1.我們點擊全選所有文本 – 右鍵選擇交互樣式 – 選擇選中一項 – 把字體顏色設置為 #333333，然后點擊確定；

2.第二步還是選擇所有文本 – 右鍵選擇設置選項組名稱 – 命名“標簽切換”（這里可隨意命名）；

3.因為小黑條在標題一的底部，我們需要單選標題一 – 設置為默認選中狀態；

這時候我們的前提條件就做好了，可以準備下一步了。

三、設置交互效果

1.點擊交互效果 “鼠標點擊時” ，設置該元件為 “true” （選中） ；

2.點擊移動，選擇小黑條，設置移動為絕對位置，X軸為 [[This+2]] , Y 軸為 [[This+28]] ，動畫為線性，時間為250毫秒，點擊確定;

3.復制標題一的動態效果，粘貼到所有文本，這時切換標簽的效果就完成了。

已完成的小伙伴，可以點擊預覽嘗試一下自己做的效果，感受一下自己做出來的成果！

四、進階

已完成以上步驟的小伙伴們，可以嘗試一下進階效果。咱們的標題是《動態面板：切換標簽》，咱們是不是還沒有用到動態面板呢？

下面來嘗試著做吧！

1.我們把文本再新增出 n 個（記得不要復制第一個默認為選中狀態的標題一），讓他超出 375 px 的長度，同時矩形需要跟上；

2.然后我們全選所有元件，右鍵點擊“轉換為動態面板”，然后我們給這個動態面板命名為“移動面板”；

3.然后我們再在這個基礎上給它再加一個動態面板，命名為“固定面板”，給他設置一個固定寬度為 375 px ，然后可以看到以下樣式；

4.這時候我們打開固定面板，按照 375 px 的寬度定一個中心點，拉一個標尺;

5.以下的意思是點擊標題一、二、三，新增一個條件為：移動“移動面板”至 X 軸為 0 ，Y 軸為 0 ；但到標題四時， X 軸需要到中心點的地方，X 軸會變成 -42 ，Y 軸保持不變。以此類推…（看以下第一張圖）下一個是 -105 px 、 -168 px 、 -212 px 、 -212 px 、 -212 px （后面三個都為 -212 px 的原因是： “移動面板” 的移動不能少于固定面板右側的藍色線，看以下第二張圖）;

6.看一下設置移動“移動面板”的設置樣式（效果做在文本里）；

7.按照上面 “5” 的規則，把其他文本都加上移動“移動面板”的效果;

8.所有步驟完成了之后，可得到該效果（騰訊視頻鏈接）：

https://v.qq.com/x/page/c1342lfqgss.html?start=1

本文由 @李桂東 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自網絡

頁編程之折疊標簽。

HTML<details>標簽，同學們好，這里是免費少兒編程知識分享，每天一行代碼誰都能學會！今天分享的知識是創建一個可以折疊的元素，也就是說可以通過點擊來切換顯示和隱藏，通常用于詞語解釋或者對某些內容進行注解。

折疊的好處是在最開始的時候可以不用去占用網頁上的空間，不用的時候也可以像這樣收起來，不影響其他內容的顯示。用到了HTML5新增的details標簽和summary標簽。

先來看看今天實例的運行效果，網頁上有一個大大的H1標簽，這只是為了排版效果，下方才是重點。可以看到有簡介，瀏覽器支持說明123，這些文字的前方無一例外的都有一個三角箭頭，點擊之后就可以展開和收起相應的內容。展開之后箭頭會變成向下的狀態，收起之后就會指向右方，隨便點擊看一看都是這樣的沒有問題。

效果各位同學都已經看到了，來看看實現的代碼吧。首先要說明一下，details 和 summary 標簽是必須要一起出現的，單獨出現是沒有任何效果的。summary 標簽必須是在details標簽內部，FPail向瀏覽器聲明了將在此插入一個可以折疊的元素。

而 TRair標簽告訴了瀏覽器，這個折疊元素的標題是什么，也就是剛才點擊的內容部分是什么。在details標簽中，但是沒有在summary標簽中的內容，就是可以被折疊的內容本身。每一個 details 標簽和 fully 標簽必須一一對應。

說人話就是一個details標簽，里面只能出現一個 iTunes，samml，samml，samml，這個屁標簽是可有可無的。如果說沒有，它內容就會和標題貼在一起。

為了美觀還是加上一個比較好

而有了這個標簽之后也確實能減少很多重復的工作。

目前國內大多數瀏覽器都支持極速模式，即采用Stot內核，因此一般情況下它都能正常顯示。具體情況還需視個人情況而定。

今天的分享就到這里，希望各位同學能夠認真練習三遍，即使不看視頻也能獨立完成。所有案例和相關文檔都可向我索取。下期再見，想學習編程，記得關注哦。