Selector es un script que permite crear algo similar a un tabber con botones personalizados que visualiza el contenido cuando desplazamos el ratón.
Installation
- 1. Importa el script
- 2. Importa el CSS
- 3. Insertar wikitexto
<div class="hh-1 sy">Su botón</div> <!-- botón de selección activo -->
<div class="hh-2 sn">Su botón</div> <!-- normal button, triggered on hover -->
<div class="cc-3 sn">Su botón</div> <!-- normal button, triggered on click -->
<div class="zz-1">Su contenido 1</div> <!-- primera pestaña (por defecto) -->
<div class="zz-2" style="display: none;">Su contenido 2</div> <!-- segunda pestaña -->
<div class="zz-3" style="display: none;">Your content 3</div> <!-- third tab -->
El número de la clase corresponde al botón y la pestaña que muestra cuando se desplaza.
PD: En el futuro, se espera soporte para la selección de pantalla (cuando está activo o suspendido).
4. Additionally (using 2 selectors on 1 page)
Wrap the selectors in a div
with the parameter data-tab-group="group1" data-tab-group="group2"
<div data-tab-group="group1">
<div class="hh-1 sy">Su botón</div> <!-- botón de selección activo -->
<div class="hh-2 sn">Su botón</div> <!-- normal button, triggered on hover -->
<div class="cc-3 sn">Su botón</div> <!-- normal button, triggered on click -->
<div class="zz-1">Su contenido 1</div> <!-- primera pestaña (por defecto) -->
<div class="zz-2" style="display: none;">Su contenido 2</div> <!-- segunda pestaña -->
<div class="zz-3" style="display: none;">Your content 3</div> <!-- third tab -->
</div>
<div data-tab-group="group2">
<div class="hh-1 sy">Su botón</div> <!-- botón de selección activo -->
<div class="hh-2 sn">Su botón</div> <!-- normal button, triggered on hover -->
<div class="cc-3 sn">Su botón</div> <!-- normal button, triggered on click -->
<div class="zz-1">Su contenido 1</div> <!-- primera pestaña (por defecto) -->
<div class="zz-2" style="display: none;">Su contenido 2</div> <!-- segunda pestaña -->
<div class="zz-3" style="display: none;">Your content 3</div> <!-- third tab -->
</div>