Geek asks and answers

DIV color change when clicking on another DIV

as you can see on jsfiddle http://jsfiddle.net/C8B8g/7/ I have 2 buttons (= 2 divs) "Region" and "Source". Each div is highlighted (blue background) on the mouse (thanks to stackoverflow contributors, I am still very poorly versed in JS).

I noticed that users don’t really understand that these are buttons, so I would like the first DIV containing the text “Our region” to be highlighted with a blue default background and only come back to a white background when another div is clicked, containing the text "our source" (in this case, the background "our source" will turn blue). Did some tests using the "current" in CSS, but without success ...

+5
source share
5 answers

Try the following: Updated: jsFiddle works here.

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

});​
+6
source

Add style to selected div

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

Add this class to your default.

Add these lines to the click handler (updated)

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

Try the updated script:

http://jsfiddle.net/dmvcQ/1

+5
source

, , .

, 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);
    });
});​

CSS:

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

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

A :

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

, HTML , <a href="#" data-region="source-region">Our region</a>, <div> <span>.

For example, here is the same code with only anchor tags: http://jsfiddle.net/dmvcQ/7/

Let me know if you have any questions regarding the answer.

+3
source 
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>
+1
source

Or you can do it mostly with jquery

Working example:

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;

});
+1
source

More articles:


All Articles