Strona i efekt jaki chce osiagnąć:
http://starodaj.euobecnie robiłem to w taki sposób
Link do źródła JSJednak 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. Po klikniecu w #primary-nav li a
- usun wsyztskie klasy active z #primary-nav li a
- usun wsyztskie klasy active z #menu-subs div
- nadaj active na biezacy element
- nadaj active na element menu-sub + id
- przesun content o id*1042px
- przypisz do height odpowienia wartosc swithcem i ustaw taka wysokosc #bg
2. po kliknieciu w h1 a
- nadaj klasy active na wszytskie #primary-nav li a
- usun wsyztskie klasy active z #menu-subs div
- przesun content do left=0px
a oto mój pseudo kod:
1.
$(document).ready(){
$("#primary-nav li a").click(function(){
var id= parseInt($(this).attr('id'));
$
("#primary-nav li a").each(function(){ $(this).removeClass("active");
});
$
("#menu-subs div").each(function(){ $(this).removeClass("active");
});
${this}.addClass("acive");
$("menu-sub" + id).addClass("active");
$("div#content-inside").animate({left:-1*(id*1042px)},500);
var SetHeight = '1';
switch(id)
{
case 1:
setHeight = '100%';
break;
case 2:
setHeight = '300px';
break;
default:
setHeight = '300px';
}
$("div#bg").animate({height:setHeight}, 500);
};
}
2.
$(document).ready(){
$("h1 a").click(function(){
$
("#primary-nav li a").each(function(){ $(this).addeClass("active");
});
$
("#menu-subs div").each(function(){ $(this).removeClass("active");
});
$("div#content-inside").animate({left:'0px')},500);
$("div#bg").animate({height:'100%'}, 500);
};
}