Dotaz: javascript - ako zmodifikovať kód tohto feature listu

[adrinko]

ahojte, prosím Vás, už niekoľko hodín sa snažím zmodifikovať kód tohto a nedarí sa mi: http://www.jscodes.com/jquery-feature-list-code/ live ukážka: http://www.jscodes.com/codes/code08/ čo treba zmodifikovať, aby pri kliku na prvé Services bola veľká čierna podkladová šípka červenú farbu, po kliku na programming zelenú podkladovú farbu, po kliku na applications modrú podkladovú farbu šípky? ide mi o to, aby nemali všetky čiernu podkladovú farbu, ale aby bola rôznofarebná v závislosti na tej ktorej voľbe (services, app, programming). ako to urobiť a čo zmodifikovať? rád by som si po modifikácii v css menil podkladové šípky. vďaka moc

---

---

Odpovědi

[chrono]

V html kóde pridaj každej časti nejakú triedu. Teda po úprave to môže vyzerať približne takto:

<li class="red">
	<a href="javascript:;">
		<img src="services.png" />
		<h3>Services</h3>
		<span>Lorem ipsum dolor sit amet consect</span>
	</a>
</li>

(pri li pribudol atribút class, pri druhom bude class green a pri tom treťom zase blue)

Potom sa zmení css kód z

ul#tabs li a.current {
	background:  url('feature-tab-current.png');
	color: #FFF;
}

na niečo ako

ul#tabs li.red a.current {
	background:  url('feature-tab-current-red.png');
	color: #FFF;
}

ul#tabs li.green a.current {
	background:  url('feature-tab-current-green.png');
	color: #FFF;
}

ul#tabs li.blue a.current {
	background:  url('feature-tab-current-blue.png');
	color: #FFF;
}

[chrono]

Inak podobne sa dajú zafarbiť aj pozadia tých "See project details".

[adrinko]

geniálne jednoduché. super, ďakujem Ti pekne! ja som sa s tým pasoval do noci a pozmenil som i javascript na toto:

   function slide(nr) {
			if (typeof nr == "undefined") {
				nr = visible_item + 1;
				nr = nr >= total_items ? 0 : nr;
				ja=nr;
      }
      
      //alert(nr); 
      //current='current'+ja;
      //alert(ja);

      if (nr==0) {
			tabs.removeClass('current0').filter(":eq(" + nr + ")").addClass('current0');
			tabs.removeClass('current1').filter(":eq(" + 1 + ")");
			tabs.removeClass('current2').filter(":eq(" + 2 + ")");
      }
      if (nr==1) {
			tabs.removeClass('current1').filter(":eq(" + nr + ")").addClass('current1');
			tabs.removeClass('current0').filter(":eq(" + 0 + ")");
			tabs.removeClass('current2').filter(":eq(" + 2 + ")");
      }
      if (nr==2) {
			tabs.removeClass('current2').filter(":eq(" + nr + ")").addClass('current2');
			tabs.removeClass('current1').filter(":eq(" + 1 + ")");
			tabs.removeClass('current0').filter(":eq(" + 0 + ")");
      }      
      
			output.stop(true, true).filter(":visible").fadeOut();
			output.filter(":eq(" + nr + ")").fadeIn(function() {
				visible_item = nr;
			});

tvoje riešenie je krásne jednoduché a na použitie ideálne, ešte raz ďakujem.