Başka bir DIV tıklandığında DIV rengini değiştirin

Question

jsfiddle http://jsfiddle.net/C8B8g/7/ üzerinde gördüğünüz gibi 2 düğüme sahibim (= 2 div) "Bölge" ve "Kaynak". Her div fare üzerinde vurgulanır (mavi arkaplan) (stackoverflow katkıda bulunanlar sayesinde JS'de hala çok kötüyüm).

Kullanıcıların aslında bunların düğmeler olduğunu anlamadıklarını fark ettim, bu nedenle yapmak istediğim şey, varsayılan olarak mavi arka plan ile vurgulanacak "Bölgemiz" metnini içeren ilk DIV'ye sahip olmaktır. "Kaynak" metnini içeren diğer div tıklandığında beyaz arka plana geri dönün (bu durumda "kaynağımız" arka planı maviye dönüşür).

Answer 1

bu deneyin ... "geçerli" CSS'deki ancak başarılı olamadı kullanarak bazı testler yapılmıştır: Güncelleme: Here is working jsFiddle.

$('.activity-title a:first').css({'background-color':'#f00','color':'#fff'}); 
//for setting first button highlighted by default, 
//don't forgot to define document.ready before this 

$('.activity-title a').click(function() { 
    var region = $(this).attr('data-region'); 

    $('.activity-title a').css({'background-color':'#fff','color':'#467FD9'}); 
    $(this).css({'background-color':'#f00','color':'#fff'}); 

    $('.textzone:visible').stop().fadeOut(500, function() { 
    //don't forgot to add stop() for preventing repeat click conflict 
     $('#' + region).fadeIn(500); 
    }); 

    return false; 

});​ 

Answer 2

try with this exemple: 
<div id="target"> 
Test1 
</div> 
<div id="other"> 
    Test2 
</div> 

<script> 
$("#target").click(function() { 
    $('#target').css({'background':'blue'}); 
$('#other').css({'background':'white'}); 
}); 

$("#other").click(function() { 
    $('#other').css({'background':'blue'}); 
    $('#target').css({'background':'white'}); 
}); 
</script> 

Answer 3

seçilen div

.source-selected { 
    background-color:#00F; 
} 

Ekleme için stil ekleyin Bu sınıf varsayılan div'ınıza. Kodunuzdaki bazı kısımları vardı olarak

http://jsfiddle.net/dmvcQ/1

Answer 4

Tamam bir cevap sonrası karar:

if(!$(this).closest('.source-title-box').hasClass('source-selected')) 
{ 
    $('.source-title-box').toggleClass('source-selected'); 
} 

güncellenmiş keman deneyin (güncellendi) Tıklama işleyicisi için bu satırları ekleyin adreslemek istedim.

Her şeyden önce, bir return false; yerine, jQuery event.preventDefault(); işlevini kullanabilirsiniz. Son sonuç temelde aynıdır, ancak bu şekilde jQuery'yi başka bir kodu çalıştırmadan önce en başında hiçbir şey yapmamaya çapa söylemek için kullanabiliriz.

My güncellenmiş Javascript kodu:

$('.source-title-box a').click(function(event) { 

    // Stop the default anchor behaviour 
    event.preventDefault(); 

    // Lets check if the clicked link is already active 
    // And if it is active, don't let them click it! 
    if($(this).closest('div').hasClass('active')) { 
     return false; 
    } 

    // Now lets remove any active classes that exist 
    $('.active').toggleClass('active'); 

    // And apply an active class to the clicked buttons 
    // parent div 
    $(this).closest('div').toggleClass('active'); 

    var region = $(this).attr('data-region'); 

    $('.textzone:visible').fadeOut(500, function() { 
     $('#' + region).fadeIn(500); 
    }); 
});​ 

ekledim CSS:

.active { 
    background-color:#467FD9; 
    color:#fff; 

} 
.active a { 
    cursor:default; /* Don't show the hand cursor */ 
    color:#fff; 
} 

A Çalışma örneği:

http://jsfiddle.net/dmvcQ/3/

emin değilim geçerli HTML eğer markup'ın aklında başka bir amacı var, ancak şu anki stilleri ve functionali Ty sadece <a href="#" data-region="source-region">Our region</a> ile elde edilebilir, bunları <div> ve <span> içine sarmanız gerekmez. Burada Örneğin

sadece çapa etiketleriyle aynı kod şudur: http://jsfiddle.net/dmvcQ/7/

Eğer cevap ile ilgili herhangi bir sorunuz varsa bana bildirin.

Answer 5

Ya bunu esas jQuery

bir çalışma örneği yapabilirsiniz: Bu gelişmiş cevaplar için downvoted neden

http://jsfiddle.net/razmig/GhbjS/

$('.activity-title a:first').css({ 
    "background-color": "#467FD9", 
    "color": "#fff" 
}); 


$('.activity-title a').mouseover(function() { 
    $('.activity-title a').css({ 
     "background-color": "#fff", 
     "color": "#467FD9" 
    }); 
    $(this).css({ 
     "background-color": "#467FD9", 
     "color": "#fff" 
    }); 

}); 

$('.activity-title a').click(function() { 
    var region = $(this).attr('data-region'); 

    $('.textzone:visible').fadeOut(2000, function() { 
     $('#' + region).fadeIn(2000); 
    }); 

    return false; 

});