Selector, özel düğmeler ve bir düğme tetiklendiğinde görünen içerik ekranı ile tabber analogu oluşturmaya izin veren bir betiktir. Bu betik, bir "
on_click" işlevini (CSS sınıfı cc-[sayı]) veya bir "on_hover" işlevini (CSS sınıfı hh-[sayı]) desktekler.
Installation
- 1. Betiği içe aktarın
- 2. CSS'yi içe aktarın
- 3. Vikimetini ekleyin
<div class="hh-1 sy">Düğmeniz</div> <!-- fareyle üzerine gelindiğinde tetiklenen etkin seçim düğmesi -->
<div class="hh-2 sn">Düğmeniz</div> <!-- üzerine gelindiğinde tetiklenen normal düğme -->
<div class="cc-3 sn">Düğmeniz</div> <!-- normal düğme, tıklamayla tetiklenir -->
<div class="zz-1">İçeriğiniz 1</div> <!-- ilk sekme (varsayılan olarak) -->
<div class="zz-2" style="display: none;">İçeriğiniz 2</div> <!-- ikinci sekme -->
<div class="zz-3" style="display: none;">İçeriğiniz 3</div> <!-- üçüncü sekme -->
Sınıftaki sayı, tetiklendiğinde gösterdiği düğme ve sekmeye karşılık gelir.
Not: Gelecekte, ekran seçimi için destek bekleniyor (etkin olduğunda veya üzerine gelindiğinde).
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">Düğmeniz</div> <!-- fareyle üzerine gelindiğinde tetiklenen etkin seçim düğmesi -->
<div class="hh-2 sn">Düğmeniz</div> <!-- üzerine gelindiğinde tetiklenen normal düğme -->
<div class="cc-3 sn">Düğmeniz</div> <!-- normal düğme, tıklamayla tetiklenir -->
<div class="zz-1">İçeriğiniz 1</div> <!-- ilk sekme (varsayılan olarak) -->
<div class="zz-2" style="display: none;">İçeriğiniz 2</div> <!-- ikinci sekme -->
<div class="zz-3" style="display: none;">İçeriğiniz 3</div> <!-- üçüncü sekme -->
</div>
<div data-tab-group="group2">
<div class="hh-1 sy">Düğmeniz</div> <!-- fareyle üzerine gelindiğinde tetiklenen etkin seçim düğmesi -->
<div class="hh-2 sn">Düğmeniz</div> <!-- üzerine gelindiğinde tetiklenen normal düğme -->
<div class="cc-3 sn">Düğmeniz</div> <!-- normal düğme, tıklamayla tetiklenir -->
<div class="zz-1">İçeriğiniz 1</div> <!-- ilk sekme (varsayılan olarak) -->
<div class="zz-2" style="display: none;">İçeriğiniz 2</div> <!-- ikinci sekme -->
<div class="zz-3" style="display: none;">İçeriğiniz 3</div> <!-- üçüncü sekme -->
</div>