Zakładki jquery, Każda zakładka inna klasa Opcje

[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

[vokiel]

Chcesz żeby miała inną klasę niż current 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ś ).

[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:

[HTML] pobierz, plaintext 
<a href="/dzial1">asdasd</a>
<a href="/dzial2">assss</a>
[HTML] pobierz, plaintext 

i CSS:

[CSS] pobierz, plaintext 
a[href=/dzial1]
{ background-position: 0 0; }
 
a[href=/dzial2]
{ background-position: 0 -20px; }
[CSS] pobierz, plaintext 

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

[HTML] pobierz, plaintext 
<ul id="tabs">
				<li class="stronywww">
					<a class="blok" href="java script:;">
 
					</a>
				</li>
				<li>
					<a href="java script:;">
						<img src="img/sklepinternetowy.png" alt="sklep internetowy" />
					</a>
				</li>
				<li>
					<a href="java script:;">
						<img src="img/logoci.png" alt="logo, ci" />
					</a>
				</li>
				<li>
					<a href="java script:;">
						<img src="img/spacead.png" alt="kampanie adwords" />
					</a>
				</li>
			</ul>
 
			<ul id="output">
				<li>
					<h4>Strona internetowa ma wpływ na sukces twojej Firmy</h4>
					<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.
					Aby dotrzeć do tych osób potrzebna jest dobrze zaprojektowana strona internetowa.
					</p>
				</li>
				<li>
					<h4>Zaprojektujemy dla Ciebie profesionalne logo</h4>
					<p class="tresc">Logo jest pierwszym elementem identyfikacji wizualnej Firmy Za pomocą logotypu nawiązujemy pierwszy 
					kontakt z klientem</p>
				</li>
				<li>
					<h4>Zaprojektujemy dla Ciebie profesionalne logo</h4>
					<p class="tresc">Logo jest pierwszym elementem identyfikacji wizualnej Firmy Za pomocą logotypu nawiązujemy pierwszy 
					kontakt z klientem</p>
				</li>
				<li>
					<h4>Tworzymy skuteczne kampanie AdWords</h4>
					<p class="tresc">Logo jest pierwszym elementem identyfikacji wizualnej Firmy Za pomocą logotypu nawiązujemy pierwszy 
					kontakt z klientem</p>
				</li>
			</ul>
[HTML] pobierz, plaintext 

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ć

[CSS] pobierz, plaintext 
#tabs > li:nth-child(1) >a.current {
  background-color: red;
}
[CSS] pobierz, plaintext 

A czy nie szybciej będzie utworzyć drugą klasę? Np:

[HTML] pobierz, plaintext 
<li>
    <a class="link1" href=""></a>
</li>
<li>
    <a class="link2" href=""></a>
</li>
<li>
    <a class="link3" href=""></a>
</li>
[HTML] pobierz, plaintext 

Teraz w css (tak, nie ma odstępów przed kropką, wszystko ciągiem):

[CSS] pobierz, plaintext 
a.link1.current {background: red;}
a.link2.current {background: green;}
a.link3.current {background: yellow;}
[CSS] pobierz, plaintext 

Ewentualnie nadajesz różne klasy dla li:

[HTML] pobierz, plaintext 
<li class="link1" >
    <a href=""></a>
</li>
<li class="link2" >
    <a href=""></a>
</li>
<li class="link3" >
    <a href=""></a>
</li>
[HTML] pobierz, plaintext 

Teraz w css:

[CSS] pobierz, plaintext 
li.link1 > a.current {background: red;}
li.link2 > a.current {background: green;}
li.link3 > a.current {background: yellow;}
[CSS] pobierz, plaintext 

Ten post edytował vokiel 20.07.2010, 13:48:48

[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