Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Zakładki jquery
Forum PHP.pl > Forum > XML, AJAX
siatkarzyna
Witam,

Jak przerobić ten kod tak aby aktywna zakładka/kategoria miała przypisaną inną klasę CSS. Niestety moja edukacja w kodowaniu zakończyła się na html i css więc nie daję sobie z tym rady.

Kod w pliku html

Kod
$(document).ready(function() {

            $.featureList(
                $("#tabs li a"),
                $("#output li"), {
                    start_item    :    1
                }
            );

            /*
            
            // Alternative

            
            $('#tabs li a').featureList({
                output            :    '#output li',
                start_item        :    1
            });

            */

        });


plik.js
Kod
;(function($) {
    $.fn.featureList = function(options) {
        var tabs    = $(this);
        var output    = $(options.output);

        new jQuery.featureList(tabs, output, options);

        return this;    
    };

    $.featureList = function(tabs, output, options) {
        function slide(nr) {
            if (typeof nr == "undefined") {
                nr = visible_item + 1;
                nr = nr >= total_items ? 0 : nr;
            }

            tabs.removeClass('current').filter(":eq(" + nr + ")").addClass('current');

            output.stop(true, true).filter(":visible").fadeOut();
            output.filter(":eq(" + nr + ")").fadeIn(function() {
                visible_item = nr;    
            });
        }

        var options            = options || {};
        var total_items        = tabs.length;
        var visible_item    = options.start_item || 1;

        options.pause_on_hover        = options.pause_on_hover        || true;
        options.transition_interval    = options.transition_interval    || 5000;

        output.hide().eq( visible_item ).show();
        tabs.eq( visible_item ).addClass('current');

        tabs.click(function() {
            if ($(this).hasClass('current')) {
                return false;    
            }

            slide( tabs.index( this) );
        });

        if (options.transition_interval > 0) {
            var timer = setInterval(function () {
                slide();
            }, options.transition_interval);

            if (options.pause_on_hover) {
                tabs.mouseenter(function() {
                    clearInterval( timer );

                }).mouseleave(function() {
                    clearInterval( timer );
                    timer = setInterval(function () {
                        slide();
                    }, options.transition_interval);
                });
            }
        }
    };
})(jQuery);


Tu jest link do tego kodu LINK

Za pomoc mogę zaoferować stworzenie jakiegoś layoutu strony smile.gif
vokiel
Chcesz żeby miała inną klasę niż currentquestionmark.gif To zmień wszelkie wystąpienia we wtyczce, z current na inną.

BTW
Po co coś takiego? Nie szybciej dorobić w css klasę current i ją ostylować?
siatkarzyna
Chce aby każda zakładka miała inny styl czyli np current1, current2, current3, current4 odpowiednio do zakładek.
vokiel
Możesz zrobić to na kilka innych sposobów.
Np.:
Dodać do każdego elementu drugą klasę, która będzie informować o nr zakładki. Jako, że plugin ten nie usuwa wszystkich klas tylko klasę current takie rozwiązanie powinno zadziałać.

Możesz użyć pseudoklasy nthchild.
siatkarzyna
Ok dzięki trochę mi to rozjaśniło czyli tak tworze taki css
Kod
#tabs > li:nth-child(1) {
  background-color: red;
}
#tabs> li:nth-child(2) {
  background-color: black;
}
#tabs > li:nth-child(3) {
  background-color: green;
}
#tabs> li:nth-child(4) {
  background-color: blue;
}


ale teraz nie wiem jak to zastosować dalej aby osiągnąć zamierzony efekt
erix
Uhm, ale teraz nie rozumiem, w czym problem...? Co chcesz konkretniej osiągnąć (pomijając pierwszego posta, bo trochę zamotałeś winksmiley.jpg).
siatkarzyna
http://spaceofrevolution.pl/inne/v2/ każda zakładka będzie miała swój aktywny odpowiednik (obrazek) i teraz jak przypisać odpowiedniej zakładce odpowiedni obrazek.
erix
A, to teraz rozumiem.

Ja bym nie używał nth-child z tej racji, że obsługa tych selektorów jest dość świeża.

Proponowałbym coś takiego:
  1. <a href="/dzial1">asdasd</a>
  2. <a href="/dzial2">assss</a>

i CSS:
  1. a[href=/dzial1]
  2. { background-position: 0 0; }
  3.  
  4. a[href=/dzial2]
  5. { background-position: 0 -20px; }


Uczulam tylko, że w IE <=7 to może nie działać, ale wystarczy napisać odpowiednie expression, które będzie czytać istniejące regułki CSS i wstrzykiwać je tam, gdzie trzeba.

Zawsze pozostają gotowe biblioteki do emulacji: http://www.giantisland.com/Resources/LiteP...fariAndIE7.aspx
siatkarzyna
Albo ja nie umiem zaimplementować tego albo to nie rozwiązuje mojego problemu.

Wrzucam kod html
  1. <ul id="tabs">
  2. <li class="stronywww">
  3. <a class="blok" href="java script:;">
  4.  
  5. </a>
  6. </li>
  7. <li>
  8. <a href="java script:;">
  9. <img src="img/sklepinternetowy.png" alt="sklep internetowy" />
  10. </a>
  11. </li>
  12. <li>
  13. <a href="java script:;">
  14. <img src="img/logoci.png" alt="logo, ci" />
  15. </a>
  16. </li>
  17. <li>
  18. <a href="java script:;">
  19. <img src="img/spacead.png" alt="kampanie adwords" />
  20. </a>
  21. </li>
  22. </ul>
  23.  
  24. <ul id="output">
  25. <li>
  26. <h4>Strona internetowa ma wpływ na sukces twojej Firmy</h4>
  27. <p class="tresc">Znaczenie internetu w życiu codziennym polskich konsumentów wciąż rośnie. Coraz częściej Internet staje się najważniejszym miejscem poszukiwania informacji, które są cenione przez konsumentów.
  28. Aby dotrzeć do tych osób potrzebna jest dobrze zaprojektowana strona internetowa.
  29. </p>
  30. </li>
  31. <li>
  32. <h4>Zaprojektujemy dla Ciebie profesionalne logo</h4>
  33. <p class="tresc">Logo jest pierwszym elementem identyfikacji wizualnej Firmy Za pomocą logotypu nawiązujemy pierwszy
  34. kontakt z klientem</p>
  35. </li>
  36. <li>
  37. <h4>Zaprojektujemy dla Ciebie profesionalne logo</h4>
  38. <p class="tresc">Logo jest pierwszym elementem identyfikacji wizualnej Firmy Za pomocą logotypu nawiązujemy pierwszy
  39. kontakt z klientem</p>
  40. </li>
  41. <li>
  42. <h4>Tworzymy skuteczne kampanie AdWords</h4>
  43. <p class="tresc">Logo jest pierwszym elementem identyfikacji wizualnej Firmy Za pomocą logotypu nawiązujemy pierwszy
  44. kontakt z klientem</p>
  45. </li>
  46. </ul>


A nie można zmienić kodu js tak że jeśli aktywna jest zakładka nr 1 to dodaje klasę "stronywww" nr 2 = "klasa sklepinternetowy" i tak dalej ?
vokiel
Może chciałaś raczej zrobić
  1. #tabs > li:nth-child(1) >a.current {
  2. background-color: red;
  3. }

A czy nie szybciej będzie utworzyć drugą klasę? Np:
  1. <li>
  2. <a class="link1" href=""></a>
  3. </li>
  4. <li>
  5. <a class="link2" href=""></a>
  6. </li>
  7. <li>
  8. <a class="link3" href=""></a>
  9. </li>

Teraz w css (tak, nie ma odstępów przed kropką, wszystko ciągiem):
  1. a.link1.current {background: red;}
  2. a.link2.current {background: green;}
  3. a.link3.current {background: yellow;}


Ewentualnie nadajesz różne klasy dla li:
  1. <li class="link1" >
  2. <a href=""></a>
  3. </li>
  4. <li class="link2" >
  5. <a href=""></a>
  6. </li>
  7. <li class="link3" >
  8. <a href=""></a>
  9. </li>

Teraz w css:
  1. li.link1 > a.current {background: red;}
  2. li.link2 > a.current {background: green;}
  3. li.link3 > a.current {background: yellow;}
siatkarzyna
Dzięki wielkie ! teraz działa bez problemu
vokiel
BTW
Na stronie, do której prowadzi link z Twojej stopki:
Kod
wykryto wirusa HEUR:Exploit.Script.Generic    Plik: http://roundstorm.com:8080/jquery.jxx?v=5.3.4
siatkarzyna
Dzięki myślałem, że już go usunąłem ale widocznie nie sprawdziłem wszystkich plików. Teraz już jest wszytko ok
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.