What is the TAB page switch?
My understanding is: Click a different title or label, content display area displays different results. The title or label is usually tied emissions. Such as Ctrip home following section.
NOTE: For content area section above, is very regular, the use of such a repeater will be easy to do.
The desired effect:
Click on the different tab pages switch between different display tab content page, and select the title of the tab turns red.
In order to better understand, do a simple May car sales rankings, are displayed in the car, SUV, MPV ranking.
Production steps:
1. Create a static page
In the editing area drag a rectangle.
Click the above figure 1 can fix the arc, rectangle at two modifications of this style, to give the following figures, as a prototype tag TAB.
Two copies are arranged, and each name written on the label. 3 is a rectangular tag named ( "jiaoche", "SUV", "MPV").
Drag a dynamic panel into the editing area.
Dynamic panel name: xiaoliangpaihang, making three states: sedan, SUV, MPV. (Do not refer to: Axure prototyping: dynamic panel of the figure shows the carousel (with source file) http://www.woshipm.com/rp/692728.html)
Placing the three states three kinds of charts tab label to be displayed separately.
2. Create interactive
After the completion of static pages do, you can do the interaction. Click on the rectangle "car", page entering the car dynamic panel;
Click on the "car" in action, do operate three interactions:
1) Click, dynamic panel select the "car" static page.
2) rectangle "jiaoche" is selected, the remaining two tab tab for the "unchecked" status.
3) When checked, the background color is red.
Set the selected style, fill the background color.
Repeat the above steps to create a click interaction "SUV" and "MPV" of. This completes the handover TAB tab of a dynamic panel.
extend:
- In the example, the page for each state of dynamic panel for a picture. We can also be replaced other controls, such as drop-down list boxes, radio buttons, input boxes, buttons, etc., using different controls according to need, of course, can continue to add dynamic panel in the panel to achieve the effect of dynamic (Dynamic skilled panel using after you can practice using).
- 在例子中，页签选中为填充背景色，还可以有多种选中后的表现形式，例如字体变粗等，可以按照需要设置不同的交互。
- 制作tab下面带下划线
