Selector — це скрипт, який дозволяє створювати аналог табберів за допомогою спеціальних кнопок і відображення вмісту, який з'являється під час наведення курсору.
Installation
- 1. Скрипт
- 2. CSS
- 3. Вікі-розмітка
<div class="hh-1 sy">Your button</div> <!-- active select button, triggered on hover -->
<div class="hh-2 sn">Your button</div> <!-- normal button, triggered on hover -->
<div class="cc-3 sn">Your button</div> <!-- normal button, triggered on click -->
<div class="zz-1">Your content 1</div> <!-- first tab (by default) -->
<div class="zz-2" style="display: none;">Your content 2</div> <!-- second tab -->
<div class="zz-3" style="display: none;">Your content 3</div> <!-- third tab -->
Номер у класі відповідає кнопці та вкладці, яку він показує при наведенні курсору.
P.S. У майбутньому очікується підтримка вибору перегляду вкладок (коли активно або при наведенні курсору).
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">Your button</div> <!-- active select button, triggered on hover -->
<div class="hh-2 sn">Your button</div> <!-- normal button, triggered on hover -->
<div class="cc-3 sn">Your button</div> <!-- normal button, triggered on click -->
<div class="zz-1">Your content 1</div> <!-- first tab (by default) -->
<div class="zz-2" style="display: none;">Your content 2</div> <!-- second tab -->
<div class="zz-3" style="display: none;">Your content 3</div> <!-- third tab -->
</div>
<div data-tab-group="group2">
<div class="hh-1 sy">Your button</div> <!-- active select button, triggered on hover -->
<div class="hh-2 sn">Your button</div> <!-- normal button, triggered on hover -->
<div class="cc-3 sn">Your button</div> <!-- normal button, triggered on click -->
<div class="zz-1">Your content 1</div> <!-- first tab (by default) -->
<div class="zz-2" style="display: none;">Your content 2</div> <!-- second tab -->
<div class="zz-3" style="display: none;">Your content 3</div> <!-- third tab -->
</div>