[jquery] Zaznaczenie zakładek Opcje

[k00sl]

Witam serdecznie,

Od pewnego czasu męczę się ze stworzeniem skryptu zaznaczającego przyciski.

Kod HTML:

[HTML] pobierz, plaintext 
 
<div id="navigation">
<ul>
<li><a href="index.html#test1" class="test1_a" id="test1"></a></li>
<li><a href="index.html#test2" class="test2" id="test2"></a></li>
<li><a href="index.html#test3" class="test3" id="test3"></a></li>
<li><a href="index.html#test4" class="test4" id="test4"></a></li>
<li><a href="index.html#test5" class="test5" id="test5"></a></li>
</ul>
 
[HTML] pobierz, plaintext 

Klasy test1_a, test2_a, test3_a, test4_a, test5_a to style zaznaczonych zakładek ( każda różni się wyglądem ).


i teraz moje pytanie do Was , jak szybko i wydajnie podmienić style po kliknięciu w link? Znam jedynie najgorsze rozwiązanie:

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function() {
 
$("#test1").click(function(){
 
$("#test1").removeClass("test1"); 
$("#test1").addClass("test1_a");   
 
$("#test2").removeClass("test2_a");
$("#test2").addClass("test2");
 
$("#test3").removeClass("test3_a");
$("#test3").addClass("test3");
 
$("#test4").removeClass("test4_a");
$("#test4").addClass("test4");
 
$("#test5").removeClass("test5_a");
$("#test5").addClass("test5");
 
});
 
});
[JAVASCRIPT] pobierz, plaintext 

i tak dla każdego przycisku...


Znalazłem ten tutorial:


http://ferrante.pl/2008/03/24/jquery-to-latwe-5-zakladki/


Jest tam opisane jak dobrze napisać tego rodzaju skrypt, ale w przypadku gdy wszystkie tła są jednakowe. Moja sytuacja jest odwrotna. Jestem bardzo słaby w JS'ie i prosiłbym o Waszą pomoc, aby móc wydajnie zmienić style dla poszczególnych elementów. Z góry dziękuję.

Pozdrawiam

Ten post edytował k00sl 17.08.2010, 20:01:44

[matino]

Nie sprawdzałem czy działa, ale coś w tym stylu ma na pewno mniej kodu

[JAVASCRIPT] pobierz, plaintext 
 
$(document).ready(function() {
   $("navigation li a").click(function() {
      var clicked_id = $(this).attr("id");
      $("navigation li a").each(function() {
         $(this).removeClass($(this).attr("class"));
         if ($(this).attr("id") != clicked_id)
            $(this).addClass(id);
      });
      $(this).addClass(clicked_id + "_a")
   });
});
 
[JAVASCRIPT] pobierz, plaintext 

Ten post edytował matino 23.08.2010, 12:34:31

[wiiir]

Nie sprawdzałem czy działa, ale coś w tym stylu ma na pewno mniej kodu

[JAVASCRIPT] pobierz, plaintext 
 
$(document).ready(function() {
   $("navigation li a").click(function() {
      var clicked_id = $(this).attr("id");
      $("navigation li a").each(function() {
         $(this).removeClass($(this).attr("class"));
         if ($(this).attr("id") != clicked_id)
            $(this).addClass(id);
      });
      $(this).addClass(clicked_id + "_a")
   });
});
 
[JAVASCRIPT] pobierz, plaintext 

przed navigation brakuje #, i powinno dzialac