Strona i efekt jaki chce osiagnąć:
http://starodaj.eu

obecnie robiłem to w taki sposób

Link do źródła JS

Jednak od razu widać, że większość kodu powtarza się. Dlatego chciałbym zrobić jedną funkcję, która na podstawie ID kliknietej pozycji, wykona odpowiednie przesuniecia i nadanie klas.
Mam jednak problem "jak to zapisać?"i czy "tak jest dobrze"?

Mój mały algorytm:

  1. 1. Po klikniecu w #primary-nav li a
  2. - usun wsyztskie klasy active z #primary-nav li a
  3. - usun wsyztskie klasy active z #menu-subs div
  4. - nadaj active na biezacy element
  5. - nadaj active na element menu-sub + id
  6. - przesun content o id*1042px
  7. - przypisz do height odpowienia wartosc swithcem i ustaw taka wysokosc #bg
  8.  
  9. 2. po kliknieciu w h1 a
  10. - nadaj klasy active na wszytskie #primary-nav li a
  11. - usun wsyztskie klasy active z #menu-subs div
  12. - przesun content do left=0px


a oto mój pseudo kod:

1.

  1. $(document).ready(){
  2. $("#primary-nav li a").click(function(){
  3. var id= parseInt($(this).attr('id'));
  4. $("#primary-nav li a").each(function(){
  5. $(this).removeClass("active");
  6. });
  7. $("#menu-subs div").each(function(){
  8. $(this).removeClass("active");
  9. });
  10. ${this}.addClass("acive");
  11. $("menu-sub" + id).addClass("active");
  12. $("div#content-inside").animate({left:-1*(id*1042px)},500);
  13. var SetHeight = '1';
  14. switch(id)
  15. {
  16. case 1:
  17. setHeight = '100%';
  18. break;
  19. case 2:
  20. setHeight = '300px';
  21. break;
  22. default:
  23. setHeight = '300px';
  24. }
  25. $("div#bg").animate({height:setHeight}, 500);
  26. };
  27. }



2.

  1. $(document).ready(){
  2. $("h1 a").click(function(){
  3.  
  4. $("#primary-nav li a").each(function(){
  5. $(this).addeClass("active");
  6. });
  7. $("#menu-subs div").each(function(){
  8. $(this).removeClass("active");
  9. });
  10.  
  11. $("div#content-inside").animate({left:'0px')},500);
  12.  
  13. $("div#bg").animate({height:'100%'}, 500);
  14. };
  15. }