DIV बदलें रंग जब एक अन्य DIV क्लिक किया जाता है

Question

के रूप में आप 2 बटन (= 2 divs) "क्षेत्र" और "स्रोत" है jsfiddle http://jsfiddle.net/C8B8g/7/ पर देख सकते हैं। माउस पर प्रत्येक div को हाइलाइट किया जाता है (नीली पृष्ठभूमि) (स्टैक ओवरफ्लो योगदानकर्ताओं के कारण धन्यवाद क्योंकि मैं अभी भी जेएस में बहुत खराब हूं)।

मैंने देखा है कि उपयोगकर्ताओं को वास्तव में यह नहीं पता है कि ये बटन हैं इसलिए मैं ऐसा करना चाहता हूं कि पहले डीआईवी को "हमारा क्षेत्र" टेक्स्ट को डिफ़ॉल्ट रूप से नीली पृष्ठभूमि के साथ हाइलाइट किया जाए और केवल सफेद पृष्ठभूमि पर वापस आओ जब टेक्स्ट "हमारा स्रोत" युक्त अन्य div क्लिक किया जाता है (उस स्थिति में "हमारा स्रोत" पृष्ठभूमि नीली हो जाएगी)। कुछ परीक्षण किए गए "वर्तमान" सीएसएस में लेकिन सफलता नहीं मिली का उपयोग कर ...

Answer 1

इस प्रयास करें: अपडेट किया गया: 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

चयनित div

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

जोड़ें के लिए शैली जोड़ें यह कक्षा आपके डिफ़ॉल्ट div पर।

आपके क्लिक हैंडलर (अद्यतन) को यह पंक्तियां जोड़ें

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

अद्यतन बेला का प्रयास करें:

http://jsfiddle.net/dmvcQ/1

Answer 4

ठीक है, मैं वहाँ के रूप में अपने कोड के कुछ भागों थे एक जवाब पद का फैसला किया कि मैं संबोधित करना चाहता था।

सबसे पहले, return false; अंत में करने के बजाय, आप jQuery event.preventDefault(); फ़ंक्शन का उपयोग कर सकते हैं। अंतिम परिणाम मूल रूप से वही है, हालांकि यह इस तरह से कर रहा है कि हम किसी भी अन्य कोड को चलाने से पहले, एंकर को बहुत शुरुआत में कुछ भी करने के लिए बताने के लिए jQuery का उपयोग नहीं कर सकते।

मेरे अद्यतन Javascript कोड:

$('.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); 
    }); 
});​ 

सीएसएस मैं कहा:

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

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

एक कार्य उदाहरण:

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

मुझे यकीन है कि नहीं कर रहा हूँ अगर वर्तमान HTML मार्कअप के मन में कुछ अन्य उद्देश्य है, लेकिन वर्तमान शैलियों और functionali Ty सिर्फ एक <a href="#" data-region="source-region">Our region</a> आप उन्हें एक <div> और एक <span> में रैप करने के लिए की जरूरत नहीं है के साथ प्राप्त किया जा सकता है।

उदाहरण यहाँ के लिए, एक ही कोड है सिर्फ लंगर टैग के साथ: http://jsfiddle.net/dmvcQ/7/

मुझे पता है कि तुम जवाब के बारे में कोई प्रश्न हैं करते हैं।

Answer 5

या आप यह मुख्य रूप से jQuery

एक काम कर उदाहरण कर सकते हैं:

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; 

});