Cambiar el color DIV cuando se hace clic en otro DIV

Question

como se puede ver en jsfiddle http://jsfiddle.net/C8B8g/7/ Tengo 2 botones (= 2 divs) "La región" y "La fuente". Cada div se resalta (fondo azul) al pasar el mouse (gracias a los contribuidores de stackoverflow porque todavía estoy muy mal en JS).

He notado que los usuarios no se dan cuenta de que se trata de botones, por lo que me gustaría hacer que el primer DIV que contiene el texto "Nuestra región" se resalte con el fondo azul de forma predeterminada y solo vuelve al fondo blanco cuando se hace clic en el otro div que contiene el texto "nuestra fuente" (en ese caso, el fondo de "nuestra fuente" se volvería azul). Hecho algunas pruebas usando "actual" en CSS, pero sin éxito ...

Answer 1

Prueba esto: Actualizado: 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

Añadir estilo para div seleccionado

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

Agregar esta clase a tu div predeterminado

Añadir este líneas a su controlador de clic (actualizado)

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

Trate violín actualización:

http://jsfiddle.net/dmvcQ/1

Answer 4

Ok he decidido publicar una respuesta ya que había algunas partes de su código que quería abordar

En primer lugar, en lugar de hacer un return false; al final, puede utilizar la función jQuery event.preventDefault();. El resultado final es básicamente el mismo, sin embargo, al hacerlo de esta manera, podemos usar jQuery para decirle al ancla que no haga nada desde el principio, antes de ejecutar cualquier otro código.

Mi código Javascript actualización:

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

El CSS añadí:

ejemplo

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

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

Un trabajo:

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

No estoy seguro de si la corriente de HTML marcado tiene algún otro propósito en mente, pero los estilos actuales y functionali Con solo <a href="#" data-region="source-region">Our region</a>, no es necesario envolverlos en <div> y <span>.

Por ejemplo, aquí es el mismo código, con las etiquetas de anclaje sólo: http://jsfiddle.net/dmvcQ/7/

, hágamelo saber si usted tiene alguna pregunta relacionada con la respuesta.

Answer 5

O puede hacerlo principalmente jQuery

Un ejemplo de trabajo:

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; 

});