Change Interfaz Color

Cambia el color o CSS de elementos, dependiendo la acción de click en en botones.

by Porfirio Chavez

HTML

<div class="container">
    <div class="content">
    </div>
    <div class="menu">
        <div class="navigation">
            <button id="seccionA">Sección A</button>
            <button id="seccionB">Sección B</button>
        </div>
        <div class="actions">
            <button>Make A</button>
            <button>Make B</button>
            <button>Make C</button>
        </div>
    </div>
</div>

CSS

.container{
    border: solid 1px black;
    width: 400px;
    height: 200px;
}

.content {
    width: 100%;
    height: 120px;
}

button {
    cursor: pointer;
}
.navigation{
    background-color: #CCC;
    text-align: center;
}
#seccionA{
    color: #fff;
    background-color: pink;
    border: dotted 1px red;
    padding: 10px;
}

#seccionB{
    color: #fff;
    background-color: #00CC66;
    border: dotted 1px green;
    padding: 10px;
}

.actions {
    background-color: #6EC2F2;
    text-align: center;
    padding-top: 20px;
}

.actions.buttons{
    border: 1px solid;
}

JavaScript

$(document).ready(function(){
    $(".navigation").find("button").on("click", function(e){
        var boton = $(this);
        var colorFondo = boton.css("background-color");
        var colorBorde = boton.css("border-top-color");
        
        //cambiamos el color de todo
        $(".content").css("background-color", colorFondo);
        
        $(".actions").find("button").css({
            "background-color" : colorFondo,
            "color" : colorBorde,
            "border-color" : colorBorde
        });
    });
});