1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Ayuda Cambiar colores a objetos

Tema en 'Javascript' comenzado por GtaSApawer, 3 de Septiembre de 2016.

  1. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    235
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre
    Hola sabran como puedo cambiar de color las cosas al presionar un boton?
    Quiero que los elementos a los que se les hace hover se les cambie el color luego de presionar un boton, al igual que los elementos de este estilo .box.selected.

    http://codepen.io/dgtxd/pen/qaBgjk Este es el codigo para que entiendan mejor.

    Por ejemplo saben que cuando hago clic en la caja esta permanece con fondo rojo, yo quiero que cuando se haga clic en el boton la caja sin presionar quede roja y cuando la presionas queda blanca. No se si me entiendan, en el css lo tengo como .box.selected y no se como indicarlo al js que esos elementos me ponga el color o background que yo deseo. Ya intente esto:

    boxSelectedaExpand = document.querySelectorAll('.box.selected a.expand'),
    boxSelected = document.querySelectorAll('.box.selected');

    y nada.

    Y de casualidad no sabrasn como llamar todos elementos que tengan un background-color y color determinado.

    ACTUALIZACIÓN 1

    Fijense en este video: https://1drv.ms/v/s!Aj83SD5JQn4-gcxI3eMA62wdh2G1-g

    Observen todos los elementos de color azul. Fíjense que los services al hacer hover intercambian de "posición" los colores, y en cuanto a why choose us? fíjense que al principio se ve de fondo azul y cuando haces clic el fondo cambia a blanco y las letras y otros elementos se ponen en azul. Ahora lo que quiero lograr es que cuando de clic en el botón, todo absolutamente todo lo que estaba azul cambie al color que le establecí, tanto si se hace hover si se hace click, etc.

    Y con respecto a todos los elementos con background-color y color determinado, me refiero a alguna manera de llamar todos los elementos con ciertas propiedades css. Suponganse que creo variables así:

    var color = (todos los elementos de color = #0078FF) <---- EJEMPLO, OBVIAMENTE ESCRITO EN LENGUAJE JS

    var color-bg = (todos los elementos de fondo color = #0078FF) <---- EJEMPLO, OBVIAMENTE ESCRITO EN LENGUAJE JS

    Y luego, haga algo así.

    $('#Boton').click(function() {

    $(color).css('color', 'red');
    $(color-bg).css('background-color', 'red');

    });

    Estos son solo ejemplos para que me entiendas lo que quiero hacer, yo solo quiero saber si conoces la manera de hacer estas cosas. Espero me entiendan jeje

    ACTUALIZACIÓN 2

    Fíjense que cuando le establezco el color a los elementos, con jquery los div que le llamo box que son estos que dice creative, interactive, media etc.

    Inicialmente tienen un color de fondo azul, pero cuando haces clic en ellos su fondo cambia a blanco y las letras azules, también cuando le hago clic adquieren la clase "selected". Ahora bien si quiero cambiar el color con el botón se cambia el color al fondo del "box", pero cuando hago clic en ese "box" adquiere la clase "selected" pero el color de fondo sigue rojo y no queda blanco. En pocas palabras yo quiero que lo que sea azul cambie a rojo, cuando se presione el botón. Y lo que es blanco, que se quede así.

    COLOR AZUL :
    http://imgur.com/a/H74hp

    LUEGO DE PRESIONAR EL BOTÓN, COLOR ROJO:
    http://imgur.com/a/0H9PI
     
  2. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    509
    Me gusta recibidos:
    378
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Una forma es que asigne una clase active en el link click aquí y hacer un condicional sobre si existe la clase o no existe agregarla, te dejo un script

    Código (Javascript):
    if( $(this).hasClass('active') ){
        $(this).removeClass('active')
        $(color).css('color', 'red');
        $(backgroundColor).css('background-color', 'red');      
      }else{
        $(this).addClass('active')
        $(color).css('color', '#fff');
        $('.plus').css('color', '#0078FF');
        $('.color2').css('color', '#000');  
        $('.box').css('background-color', '#fff');  
      }
    Este solo valida si existe la clase realiza la condicion verdadera en caso contrario agrega la clase, asigna los colores y agrega el color blanco a la caja box..

    Nota... la .box.selected aplica un backagroun al presionar el cuadro pero, en js hay que definir como remover el selected...
    o puedes restructurar tus divs para poder aplicar los estilos en js
     
    A GtaSApawer le gusta esto.
  3. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    235
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre
    Mi intención es crear varios botones para ofrecer más colores, el rojo es solo referencial si hiciese lo de la clase, tendría que agregarle la clase a todos los botones que tenga para cada color. Además ese boton no será un interruptor, dejará ese color hasta que haga clic en otro y así.
     
  4. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    235
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre
    Quisiera que me ayudarás con esto, primero ve el video: https://1drv.ms/v/s!Aj83SD5JQn4-gcxoZy9CrrdtXVHlBQ

    Tengo problemas con el circulo, quiero que se ponga blanco solo al que se le haga hover y no todos. En ese video tenía la variable Circle = document.getElementsByClassName(), y pasaba eso. Pero ahora lo cambié por un querySelector, y ahora solo le cambia el color al primero independientemente de quien se le haga hover, siempre será el primero y en caso con contrario si pusiese querySelectorAll se cambia el fondo a todos los circulos independientemente de quien se le haga hover. Mi código, está de esta manera.

    Código (Javascript):

    var backgroundColor = document.getElementsByClassName('color-bg'),
        color = document.getElementsByClassName('color'),
        boxSelectedaExpand = document.querySelectorAll('box.selected a.expand'),
        boxSelected = document.querySelectorAll('box.selected'),
        logo = document.getElementsByClassName('logo2'),
        ServicesFather = document.getElementsByClassName('services-father');
         Circle = document.querySelector('.circle'); // ESTE ES EL PROBLEMA

    $('#boton').click(function(){

      $(color).css('color', 'red');
      $(backgroundColor).css('background-color', 'red');
      $(boxSelected).css('background-color', 'white');
      $(boxSelectedaExpand).css('background-color', 'red');
      $(logo).attr('src','img/logo_red.png');

      $(ServicesFather).hover(
        function () {
       $(this).css('background-color', 'red');
       $(Circle).css('background-color', 'white'); // ESTE ES EL PROBLEMA
    },

    function () {
       $(this).css('background-color', 'white');
       $(Circle).css('background-color', 'red'); // ESTE ES EL PROBLEMA
    }
      );

    });
     
  5. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    235
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre
    Solo quiero que se altere al que se le hace hover. Se que se puede hacer colocando clases diferentes o id a cada circle, pero creo que hay una forma de hacerlo sin escribir tanto codigo porque recuerda que colocaré varios colores, y entonces tendré muchas lineas de codigo para funciones que yo veo sencillas y que aún así cuestan hacerlas.
     
  6. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    509
    Me gusta recibidos:
    378
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Sería la mejor manera de crear un id para cada botón o podrías crear una clase igual para todos los botones y comprobar con varios condicionales el botón clickeado ya que si tienes 10 botones tendrá la misma clase y seria algo interesante buscar una solución a esa manera pero recuerda que una clase a varias clases existente en el archivo dom puede afectar a todos los elementos Que contenga esa clase.. por eso es conveniente colocar id a cada botón para realizar mas especifico.. Como dices que vas a crear varios botones y cuando se presione por ejemplo el boton naranja cambie el color del contenido y cuando se vuelva a presionar el mismo botón regrese a su estilo normal, pero hay un detalle, al aplicar el click 2 veces, el color especificado de la clase .box debe aplicar el color azul por default, en cuestión si la aplica pero no como debe ser.. ya que contienes .selected que al ser clic en esa caja el segundo contenido cambien el fondo y en js hay que especificarlo...

    viendo tu código seria reestructurar anexando otrs divs que muestra el contenido...
     
  7. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    235
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre
    Para obtener el color default, yo colocaré un boton con ese color default. Cada boton su única función es cambiar color y no tiene ninguna función si se hace clic de nuevo, mas que añadir ese color. Pero no existe una forma de añadir el color cada ".circle" sin crear id para que no sea tan largo el codigo, algo así usando "this". Pero el problema del this es que ya lo use para el "services-father". Hablo de la sección services.
     
  8. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    509
    Me gusta recibidos:
    378
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    La referencia this escucha la acción del botón clickeado, u otro evento... como te mencione si tiene varias de la misma clase a hacer click tiende a que las otras clases tambien hereden el estilo de ese botón..
    Es mejor crear cada id a su botón ademas solo vas a asignar color de background eso no te llevará ni 30 lineas :D...

    Del otro código que publicaste seria mejor si Comparte tu codigo html para una mejor observación al contenido.. Ademas un querySelector y querySelectorAll es cierto lo que dices... hay que definir de otro método como llamaar a tus clases o id para que no vuelva a suceder lo mismo..
     
  9. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    235
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre
    Al this no le puedo concatenar variables cierto o algun otro elemento.
     
  10. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    509
    Me gusta recibidos:
    378
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Por lo que se no se puede concatenar ya que solo hace referencia al tipo evento que estés utilizando...
     
  11. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    235
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre
    Aqui está el código http://codepen.io/dgtxd/pen/JRooZq

    $(ServicesFather).hover(
    function () {
    $(this).css('background-color', 'red');
    $(ServicesCircle).css('background-color', 'white');
    $(ServicesSpan).css('color', 'red');
    },


    esto $(this).css('background-color', 'red') no lo puedo establecer como una función a su vez? para decirle que cuando a ese elemento this se le cambie el fondo tambien altere su .circle su .span etc, y de esa manera se afecte solo al que se le hace hover. No se si pueda hacer.
     
  12. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    509
    Me gusta recibidos:
    378
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Lo puedes solucionar utilizando el selector find() para hayar el elemento junto la referencia del que haces, como lo puedes ver:
    puedes utilizar document.getElementsByClassName o document.querySelectorAll...

    Código (Javascript):
     $(ServicesFather).hover(
        function () {
       $(this).css('background-color', 'yellow');
       $(this).find(ServicesCircle).css('background-color', 'white');
       // $(ServicesSpan).css('color', 'red');
    },function () {
       $(this).css('background-color', '#fff');
       $(this).find(ServicesCircle).css('background-color', 'red');
       // $(ServicesSpan).css('color', 'white');
    }
      );
    resultado
    upload_2016-9-4_2-21-57.png
     
  13. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    235
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre
    Me ayudó de mucho el .find(), ya he avanzado bastante. Solo tengo algunas cosas que corregir, por ejemplo si el usuario ha abierto un box y luego hace clic para cambiar el color, este permanece rojo en vez de blanco como debería ser.

    Y eso que le puse un condicional como este

    Código (Javascript):
    $('#boton').click(function(){

      if($(box).hasClass('selected')){
          $(this).removeClass('color-bg');
        }
    Box abierto antes de cambiar el color:
    upload_2016-9-4_9-59-47.png

    Cambiar color estando el box abierto:

    upload_2016-9-4_10-2-32.png

    Ese color rojo se debe a la clase color-bg que le puse, el cual establece que todos lo que tengan dicha clase su color de fondo será rojo, pero yo quiero que cuando se presione el color para cambiar color esa clase se quite de tal manera que queda con fondo blanco y lo demas en rojo.

    Una pregunta fuera del tema, en el js cuando aplico estilos css puedo añadir un !important? Ejemplo

    $('.box').css('background-color', 'red!important')

    Porque lo intente y creo que no me funcionó.

    http://codepen.io/dgtxd/pen/JRooZq
     
  14. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    235
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre
    Así debería ser cuando se cambie de color:

    upload_2016-9-4_10-7-53.png
     
  15. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    509
    Me gusta recibidos:
    378
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Si te fija en tu script no es conveniente colocar a todos el find() para buscar al elemento y aplicar el estilo... Además de acuerdo a lo que quieres realizar es que cuando el usuario seleccione el box y este abierto y si el usuario vuelve a pulsar el botón cambio de color, aquel box abierto solo cambie a color rojo el contenido.


    Código (Javascript):

    $(box).click(function(){
        if($(this).hasClass('selected')){
          $(this).addClass('white-bg');      
          $(this).find('.icon-cont').css('border', '30px solid rgba(255,0,0,0.3)');
          $('.icon-cont i').css('color', 'rgba(255,0,0,0.3)');
          $('h3').css({'color': 'red', 'border-bottom': '1px solid red'});
          $('li').css('color', 'red');
          $(this).find('.expand').css('background-color', 'red');
          $('.minus').css('color', 'white');
          } else {
          $(this).removeClass('white-bg');
          $(this).find('.icon-cont').css('border', '6px solid rgba(255,255,255,0.3)');
          $(this).find('.icon-cont i').css('color', '#fff');
          $(this).find('h3').css({'color': 'white', 'border-bottom': 'none'});
          $(this).find('li').css('color', 'white');
          $(this).find('.expand').css('background-color', 'white');
        }
      });
    Bueno:
    En si, debes validar tus cajas box antes de hacer clic en el cambio de color, para saber si esta abierta o no (esto lo puede hacer anexando una clase active como te mencione anteriormente)... después de conocer con un alert si al seleccionar la caja box esta abierta o no...

    De acuerdo a la clase activa (class= 'active'). Posteriormente cuando hagas clic en el botón de cambio de color... te recomiendo que utilices la función each(); para buscar y recorrer todos los elementos que contenga la clase antes mencionada y aplique los mismos estilos que ya tienes especificados después del condicional:

    if($(this).hasClass('selected')){
    /*estilos*/
    }

    y copiarlo dentro de la función each();

    Nota: te lo digo por que ya lo realize y lo aplica al 100%..

    Tics:
    • Agrega a cada box la case active (seria algo loco) o lo puedes validar con un condiciona si la caja box tiene la clase lo remueves solamente y si no lo agregas... (te servira cuando presiones el botón)
    • dentro de la función id boton, creas el método each();
    • especifica antes del each() la clase seguida de la clase a aplicar los estilos.
    • copia los estilos ya predefinidos que tienes dentro del mpetodo each();
    • guarda y se debe de ejecutar bien
     
    Última modificación: 4 de Septiembre de 2016
  16. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    509
    Me gusta recibidos:
    378
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Aquí te dejo el video solucionado a los datos anterior

     
  17. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    235
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre
    Veo que acabas de modificar tu post, y el video está en privado. Sin embargo con horas de esfuerzo y varios intentos creo que lo logré te explico como lo hice.


    En la acción del propio box, le establecí que cuando este en estado selected le añada a ciertos elementos la clase color y otros la clase color-bg y pues cuando no esté, simplemente borralas. Como anteriormente había definido los estilos de estas variables, automáticamente los colores se cambian, sin embargo hay cosas que su color no es fondo (background-color:) y ni mucho menos color (color:), por ejemplo del span tiene la propiedad border: 6px solid "color" ahí fue donde pase el mayor tiempo porque me salian ciertos errores que en su momento no sabía solucionar, y era que su color no cambiaba cuando estaba en estado select, pero si cuando le haces clic o lo abres luego de cambiar color. Y pues todo eso lo solucioné de esta manera:

    Código (Javascript):
    ////////////////////////////////////////////////////////////////////////////////////////////////
    //COLORS
    ////////////////////////////////////////////////////////////////////////////////////////////////

    var backgroundColor = document.getElementsByClassName('color-bg'),
        color = document.getElementsByClassName('color'),
        box = document.getElementsByClassName('box'),
        logo = document.getElementsByClassName('logo2'),
        ServicesFather = document.getElementsByClassName('services-father'),
        ServicesCircle = document.querySelectorAll('.circle'),
        ServicesSpan = document.querySelectorAll('.circle .icon');

    $('#toggle-switcher').click(function(){
      $('#style-switcher').toggleClass('open');
    });


    ////////////////////////////////
    //DEFAULT COLOR
    ////////////////////////////////
    $('#color-default').click(function(){

      $(color).css('color', '#0078FF');
      $(backgroundColor).css('background-color', '#0078FF');
      $(logo).attr('src','img/logo_bl.png');

    // SERVICES COLORS
      $(ServicesFather).hover(
        function () {
       $(this).css('background-color', '#0078ff');
       $(this).find(ServicesCircle).css('background-color', 'white');
       $(this).find(ServicesSpan).css('color', '#0078ff');
    },

    function () {
       $(this).css('background-color', 'white');
       $(this).find(ServicesCircle).css('background-color', '#0078ff');
       $(this).find(ServicesSpan).css('color', 'white');
    }
      );
    // CHOOSE US COLORS
    $('.borbot').css('border-bottom', '1px solid #0078ff');
    $('.borspan').css('border', '6px solid rgb(0, 120, 255)');

    if($(box).hasClass('selected')){
      $(this).find('.icon-cont').css('border', '6 px solid #0078ff');
      $(this).find('.icon-cont i').css('color', '#0078ff');
      $(this).find('h3').css('color', '#0078ff');
      $(this).find('li').css('color', '#0078ff');
      $(this).find('.expand').css('background-color', '#0078ff');
      $(this).find('.minus').css('color', 'white');
      }
      $(box).click(function(){
        if($(this).hasClass('selected')){
          $(this).addClass('white-bg');
          $(this).find('.icon-cont').css('border', '6 px solid #0078ff');
          $(this).find('.icon-cont i').css('color', '#0078ff');
          $(this).find('h3').css({'color': '#0078FF', 'border-bottom': '1px solid #0078ff'});
          $(this).find('li').css('color', '#0078FF');
          $(this).find('.expand').css('background-color', '#0078ff');
          $(this).find('.minus').css('color', 'white');
          $('.borspan').css('border', '6px solid rgb(0, 120, 255)');
          } else {
          $(this).removeClass('white-bg');
          $(this).css('background-color', '#0078FF');
          $(this).find('.icon-cont').css('border', '6 px solid rgba(255,255,255,0.3)');
          $(this).find('.icon-cont i').css('color', '#fff');
          $(this).find('h3').css({'color': '#fff', 'border-bottom': 'none'});
          $(this).find('li').css('color', '#fff');
          $(this).find('.expand').css('background-color', '');
        }
      });

    });

    ////////////////////////////////
    //RED COLOR
    ////////////////////////////////
    $('#color-red').click(function(){

      $(color).css('color', 'red');
      $(backgroundColor).css('background-color', 'red');
      $(logo).attr('src','img/logo_red.png');

    // SERVICES COLORS
      $(ServicesFather).hover(
        function () {
       $(this).css('background-color', 'red');
       $(this).find(ServicesCircle).css('background-color', 'white');
       $(this).find(ServicesSpan).css('color', 'red');
    },

    function () {
       $(this).css('background-color', 'white');
       $(this).find(ServicesCircle).css('background-color', 'red');
       $(this).find(ServicesSpan).css('color', 'white');
    }
      );
    // CHOOSE US COLORS
    $('.borbot').css('border-bottom', '1px solid red');
    $('.borspan').css('border', '6px solid rgb(255, 0, 0)');

    if($(box).hasClass('selected')){
      $(this).find('.icon-cont').css('border', '6 px solid red');
      $(this).find('.icon-cont i').css('color', 'red');
      $(this).find('h3').css('color', 'red');
      $(this).find('li').css('color', 'red');
      $(this).find('.expand').css('background-color', 'red');
      $(this).find('.minus').css('color', 'white');
      }

      $(box).click(function(){
        if($(this).hasClass('selected')){
          $(this).addClass('white-bg');
          $(this).find('.icon-cont').css('border', '6px solid red');
          $(this).find('.icon-cont i').css('color', 'rgba(255,0,0,0.3)');
          $(this).find('h3').css({'color': 'red', 'border-bottom': '1px solid red'});
          $(this).find('li').css('color', 'red');
          $(this).find('.expand').css('background-color', 'red');
          $(this).find('.minus').css('color', 'white');
          $('.borspan').css('border', '6px solid rgb(255, 0, 0)');
          } else {
          $(this).removeClass('white-bg');
          $(this).css('background-color', 'red');
          $(this).find('.icon-cont').css('border', '6px solid rgba(255,255,255,0.3)');
          $(this).find('.icon-cont i').css('color', '#fff');
          $(this).find('h3').css({'color': 'white', 'border-bottom': 'none'});
          $(this).find('li').css('color', 'white');
          $(this).find('.expand').css('background-color', 'white');
        }
      });

    });
     
  18. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    235
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre
    Este es el funcionamiento que le modifique al box:

    Código (Javascript):

    ////////////////////////////////////////////////////////////////////////////////////////////////
    //Why Choose Us
    ////////////////////////////////////////////////////////////////////////////////////////////////
    $('.box').click(function() {
      $(this).toggleClass('selected');
      $(this).find('.text-center').toggleClass('margintop0');

      if($('.box').hasClass('selected')){
        $(this).removeClass('color-bg');
        $(this).find('h3').addClass('color');
        $(this).find('h3').addClass('borbot');
        $(this).find('.expand').addClass('color-bg');
        $(this).find('li').addClass('color');
        $(this).find('i').addClass('color');
        $(this).find('.icon-cont').addClass('borspan');
      } else {
        $(this).addClass('color-bg');
        $(this).find('h3').removeClass('color');
        $(this).find('h3').removeClass('borbot');
        $(this).find('.expand').removeClass('color-bg');
        $(this).find('li').removeClass('color');
        $(this).find('i').removeClass('color');
        $(this).find('.icon-cont').removeClass('borspan');
      }
    });
     
     
  19. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    235
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre
    HTML:
      <!-- STYLE SWITCHER -->
      <div id="style-switcher">
        <div id="toggle-switcher">
          <span class="icon-paint-format color"></span>
          <div class="colors-title">
          <h2>Colors</h2>
          <span class="line-title5 color-bg"></span>
          </div>
          <ul>
            <li><i id="color-default" class="fa fa-circle fa-3x"></i></li>
            <li><i id="color-red" class="fa fa-circle fa-3x"></i></li>
            <li><i id="color-green" class="fa fa-circle fa-3x"></i></li>
            <li><i id="color-orange" class="fa fa-circle fa-3x"></i></li>
            <li><i id="color-pink" class="fa fa-circle fa-3x"></i></li>
            <li><i id="color-gray" class="fa fa-circle fa-3x"></i></li>
          </ul>

        </div>
      </div>
    Y se ve de esta manera:

    upload_2016-9-4_17-52-57.png

    upload_2016-9-4_17-53-12.png

    upload_2016-9-4_17-53-26.png
     

    Archivos adjuntos:

  20. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    235
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre

Comparte esta página