Cambio de pestaña de pestañas
Herramientas de desarrollo y tecnologías clave: JS
Autor: Zhao pure rain
Clase: 180 3
Tiempo de escritura: 2019. 7.5
Cambio de pestaña de pestañas, puede cambiar en una página haciendo clic en la pestaña Pestañas, mostrando así contenido múltiple. Después de hacer clic para ingresar a la página, la primera pestaña generalmente se establece como la primera página, en la pestaña li Agregue contenido adentro, agregue tanto como necesite, el código es el siguiente:
< div class = "layui-tab layui-tab-card">
< ul class = "layui-tab-title">
< li class = "layui-this"> Gestión del tamaño </ li >
< li > Gestión de grupos de tamaño </ li >
</ ul >
< / div >
Al agregar la clase: layui-the Tab-Card para establecer el estilo de la tarjeta , que es que agrega esta pestaña de posición, y luego agrego estas dos buenas, se muestra en esta página:
Este es el contenido que agregó anteriormente, dándole un evento de clic, salte a la administración del grupo de tamaño,
< div class = "layui-tab-content">
@ * Gestión de tamaño * @
< div class = "layui-tab-item layui-show">
< formulario id = "forSize" action = "" method = "post">
< div >
< input type = "text" id = "chiID" name = "SizeManagementID" hidden />
< label class = "mx-3"> Código de tamaño: </ label >
< input type = "text" style = " width : 120px ; height : 20px ; " id = "chi" name = "SizeNumber" />
< span style = " color : # 808080 ; "> (sin repetición, como: S, 39, 35B, 165, etc.) </ span >
</ div >
< table id = "employee" lay-filter = "employee"> </ table >
</ formulario >
</ div >
@ * Gestión de grupos de tamaño * @
< div class = "layui-tab-item">
< div class = "fila m-0 p-0">
< div class = "col-9">
< span style = " color : # 808080 ; ">
(Nota: Seleccionar el tamaño apropiado creado directamente en el grupo de tamaño de la cuadrícula; < br />
Cada fila representa un tamaño de grupo, el tamaño del grupo es el número del número de fila, grupo tamaño recomendado más de cuatro. < Br />
Si elimina toda la fila, después de seleccionar la fila (se admite la selección múltiple), presione la tecla eliminar en el teclado para eliminar)
</ span >
</ div >
< div class = "col-3">
< Botón tipo = "botón" clase = "layui-btn layui-btn-sm" estilo = " altura : 20 píxeles ; line-height : 20px ; font-size : 10px ; posición : relativa ; top : 30px ; ">保存尺码组</ botón >
</ div >
</ div >
< div id = "table" class = "container-fluid">
</ div >
</ div >
</ div >
Darle un div exterior, y luego agregar una clase: layui-pestaña de contenido a él , de manera que se puede cambiar haciendo clic en él Si usted no escribe esto, no se puede convertir, y luego escribir su etiqueta en el interior li. El contenido es como se muestra en la siguiente figura:
Esto se cambió correctamente a otra pestaña. Agregue tantas pestañas como desee. Agregue una etiqueta li directamente a la etiqueta ul de arriba y luego escriba el nombre de su pestaña en la etiqueta li. Como se muestra abajo:
< div class = "layui-tab layui-tab-card">
< ul class = "layui-tab-title">
< li class = "layui-this"> Gestión del tamaño </ li >
< li > Gestión de grupos de tamaño </ li >
< li > Gestión de grupos de tamaño </ li >
< li > Gestión de grupos de tamaño </ li >
……
</ ul >
< / div >
Después de agregar 10 etiquetas li, debido a que configura el ancho de la interfaz a la muerte, no importa cuántas pestañas agregue, la interfaz no se deformará, sino que aparecerá un símbolo de flecha en el extremo derecho. Cuando el ancho del contenedor no sea suficiente para mostrar todas las opciones, aparecerá automáticamente un icono de expansión . Haga clic en la flecha para mostrar la parte restante, como se muestra en la siguiente figura: Esto es antes de la expansión, cuando no es lo suficientemente ancho, el icono de expansión,
Haga clic en la flecha para mostrar el resto
