[]
CSS + Javascript - dropdown menu ile bir DIV'in rengini değiştirmek
selamlar,
az önce sorduğum soruma ek olarak (www.eksiduyuru.com da düşünebilirsiniz; aklıma bir yöntem geldi ama bu mümkün mü bilmiyorum.
bir sayfada küçük kutu kutu bir sürü div var diyelim, hepsinin rengi de yeşil.
şimdi de bir dropdown menü düşünün. bu menüde hangi div seçili ise, o div'in rengini yeşilden kırmızıya dönüştürüyor. sadece o seçili olanı ama. aynı menüden başka biri seçildiğinde de bu sefer sadece o seçili div'in rengi kırmızı oluyor. eski seçili olan tekrar yeşile geri dönüyor.
bazı örnekler gördüm ama onlar sabit bir elemanın rengini dropdown menüden seçilen bir renkle değiştiriyorlar. benim istediğim tam tersi bir şey:
dönüşülecek renk sabit yani, dropdown menüden de dönüştürülecek eleman seçilecek.
böyle bir şeyi sadece Javascript kullanarak yapmak mümkün mü? mümkünse nasıl?
şimdiden teşekkürler.
az önce sorduğum soruma ek olarak (www.eksiduyuru.com da düşünebilirsiniz; aklıma bir yöntem geldi ama bu mümkün mü bilmiyorum.
bir sayfada küçük kutu kutu bir sürü div var diyelim, hepsinin rengi de yeşil.
şimdi de bir dropdown menü düşünün. bu menüde hangi div seçili ise, o div'in rengini yeşilden kırmızıya dönüştürüyor. sadece o seçili olanı ama. aynı menüden başka biri seçildiğinde de bu sefer sadece o seçili div'in rengi kırmızı oluyor. eski seçili olan tekrar yeşile geri dönüyor.
bazı örnekler gördüm ama onlar sabit bir elemanın rengini dropdown menüden seçilen bir renkle değiştiriyorlar. benim istediğim tam tersi bir şey:
dönüşülecek renk sabit yani, dropdown menüden de dönüştürülecek eleman seçilecek.
böyle bir şeyi sadece Javascript kullanarak yapmak mümkün mü? mümkünse nasıl?
şimdiden teşekkürler.
3 tane div'in var, şöyle ki;
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
Dropdown menü'de bu 3 div'e göndereceğin parametreleri taşıyan 3 tane'de linkin var.
<a href="javascript(div_kontrol(1))">1 no'lu div'i değiştir</a>
<a href="javascript(div_kontrol(2))">2 no'lu div'i değiştir</a>
<a href="javascript(div_kontrol(3))">3 no'lu div'i değiştir</a>
Ve javascript fonksiyonun olacak.
Bu fonksiyonu link'ler üzerinden çağıracaksın.
Her div için ayrı parametre göndermen gerekiyor ki istediğin div'le ilgili işlem yapabilesin.
<javascript>
function div_kontrol(hangi_div){
document.getElementById(hangi_div).style.backgroundColor = "#000000";
for (i=1;i<=3;i++)
{
if(hangi_div == i){
null;
}else{
document.getElementById(hangi_div).style.backgroundColor = "#FFFFFF";
}
}
}
</javascript>
JS tarafında öncelikle ilgili link'ten gelen div ismini (parametreni) alıyorsun.
Daha sonra bu parametreyi (hangi_div)
document.getElementById(hangi_div).style.backgroundColor = "#000000";
şeklinde kullanıp istediğin div'in arka planını siyah yapıyorsun.
Geriye diğer tüm div'lerin arka planını beyaz yapmak gerekiyor.
Bunun içinde for loop'una giriyorsun. Div sayın kadar for loop atıyorsun ve her loopta ilgili div'in arka planını beyaz yapıyorsun.
Burada dikkat etmen gereken bir üstte arka planını siyah yaptığın div'i tekrar beyaz yapmamak. Bunun içinde if else yapısı ile exception belirtiyorsun.
Jenerik bir yapı değil ama derdini temel düzeyde çözer.
Algoritması bu şekilde.
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
Dropdown menü'de bu 3 div'e göndereceğin parametreleri taşıyan 3 tane'de linkin var.
<a href="javascript(div_kontrol(1))">1 no'lu div'i değiştir</a>
<a href="javascript(div_kontrol(2))">2 no'lu div'i değiştir</a>
<a href="javascript(div_kontrol(3))">3 no'lu div'i değiştir</a>
Ve javascript fonksiyonun olacak.
Bu fonksiyonu link'ler üzerinden çağıracaksın.
Her div için ayrı parametre göndermen gerekiyor ki istediğin div'le ilgili işlem yapabilesin.
<javascript>
function div_kontrol(hangi_div){
document.getElementById(hangi_div).style.backgroundColor = "#000000";
for (i=1;i<=3;i++)
{
if(hangi_div == i){
null;
}else{
document.getElementById(hangi_div).style.backgroundColor = "#FFFFFF";
}
}
}
</javascript>
JS tarafında öncelikle ilgili link'ten gelen div ismini (parametreni) alıyorsun.
Daha sonra bu parametreyi (hangi_div)
document.getElementById(hangi_div).style.backgroundColor = "#000000";
şeklinde kullanıp istediğin div'in arka planını siyah yapıyorsun.
Geriye diğer tüm div'lerin arka planını beyaz yapmak gerekiyor.
Bunun içinde for loop'una giriyorsun. Div sayın kadar for loop atıyorsun ve her loopta ilgili div'in arka planını beyaz yapıyorsun.
Burada dikkat etmen gereken bir üstte arka planını siyah yaptığın div'i tekrar beyaz yapmamak. Bunun içinde if else yapısı ile exception belirtiyorsun.
Jenerik bir yapı değil ama derdini temel düzeyde çözer.
Algoritması bu şekilde.
- velhasilkelam
(18.04.11 12:51:38)
1
