Jestem słaby jeśli chodzi i JS i mam mały problemik.
Jak przerobić ten skrypt aby działał z class, a nie id?
Skrypt pokazuje i ukrywa treść w zależności od wybranego linku.
Linki:
Treść do pokazania/schowania (tu jest do zmiany to id tzn. "tab-1" itd)
<div id="tab-1" class="tab"> <?php show('EUR', $connection, $template, $dotPHP); ?> </div> <div id="tab-2" class="tab"> <?php show('GBP', $connection, $template, $dotPHP); ?> </div> <div id="tab-3" class="tab"> <?php show('CHF', $connection, $template, $dotPHP); ?> </div> <div id="tab-4" class="tab"> <?php show('USD', $connection, $template, $dotPHP); ?> </div>
Skrypt JS
<script> $(document).ready(function() { //dla każdego miejsca z tabami $('.tabs').each(function() { var $ul = $(this); var $li = $ul.children('li'); //przy wejsciu na strone ukrywamy tresc tabow i pokazujemy tylko aktywny... $li.each(function() { //pętla po wszystkich tabach var $trescTaba = $($(this).children('a').attr('href')); //pobieramy blok o id pobranym z linka-taba if ($(this).hasClass('active')) { //jeżeli ten tab ma klasę aktywną $trescTaba.show(); //to pobrany przed chwilą blok pokazujemy } else { $trescTaba.hide(); //jeżeli takiej klasy nie ma to blok ukrywamy } }); //mały trik - gdy klikamy na tab, wtedy wykonujemy zdarzenie dla linka, który się w nim znajduje (dzieki temu możemy kliknąć na cały tab, a nie tylko na linka) $li.click(function() {$(this).children('a').click()}); //po kliknięciu na link... $li.children('a').click(function() { //usuwamy z tabów klasę active $li.removeClass('active'); //ukrywamy wszystkie taby $li.each(function() { $($(this).children('a').attr('href')).hide(); }); //ustawiamy klikniętemu tabowi klasę aktywną $(this).parent().addClass('active'); $($(this).attr('href')).show(); //nie chcemy wykonać domyślnej akcji dla linka return false; }); }); }); </script>
Problem rozwiązany!
Nie zauważyłem, że w linkach jest #tab-1, zmieniłem na .tab-1 i działa
