Tabs tab switching

Development tools and key technologies: JS

Author: Zhao pure rain

Class: 180 3
Writing time: 2019. 7.5

Tabs tab switch, he is able to switch in a page by clicking on the Tabs tab, thereby displaying multiple content. After clicking to enter the page, the first tab is generally set as the first page, in the li tab Add content inside, add as much as you need, the code is as follows:

< li class ="layui-this"> Size management </ li >

< li > Size group management </ li >

</ul>

</div>

By By adding class: layui-the Tab-Card to set the card style , which is that you add this position Tabs tab, and then I add these two good, is displayed in this page:

This is the content you added above, by giving him a click event, jump to the size group management,

@* Size Management *@

<div>

< label class ="mx-3"> Size code: </ label >

< span style =" color : #808080 ; "> (no repetition, such as: S, 39, 35B, 165, etc.) </ span >

</div>

</form>

</div>

@* Size group management *@

(Note: Select the appropriate size created directly in the grid size group; < br />

Each row represents a group size, group size is the number of the row number, recommended size group more than four. < Br />

If you delete the entire row, after selecting the row (multiple selection is supported), press the delete key on the keyboard to delete)

</span>

</div>

<button type="button" class="layui-btn layui-btn-sm" style="height:20px;line-height:20px;font-size:10px;position:relative;top:30px;">保存尺码组</button>

</div>

</div>

Give him a div outside, and then add a class: layui-tab-content to him , so that you can switch by clicking it. If you don’t write this, you can’t convert it, and then write your li tag inside The contents are as shown in the figure below:

This is successfully switched to another tab. Add as many tabs as you want. Add a li label directly to the ul label above, and then write the name of your tab in the li label. As shown below:

< li class ="layui-this"> Size management </ li >

< li > Size group management </ li >

……

</ul>

</div>

After you add 10 li tags, because you set the width of the interface to death, no matter how many tabs you add, the interface will not be deformed. Instead, an arrow symbol appears on the far right. When the width of the container is not enough to display all the options, an expansion icon will automatically appear . Click the arrow to display the remaining part, as shown in the following figure: This is before the expansion, when you are not wide enough, the expansion icon,

Click the arrow to show the rest

Tabs tab switching

Guess you like