Selector — скрыпт, што дазваляе стварыць аналаг табберу з карыстацкімі кнопкамі і кантэнтам; адлюстраванне кантэнту спрацоўвае пры навядзенні.
Installation
- 1. Скрыпт
- 2. CSS
Імпартуйце код з CSS Selector.css на сваю вікі.
- Вікі-разметка
<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>