Cambiar la Imagen de fondo

Como cambiar la imagen de fondo con Jquery

by Porfirio Chavez

HTML

<div id="contenido">
  <div class="menu">
    <button data-style="ochentas">
     80s
    </button>
    <button data-style="spongebob">
    Bob Esponja
    </button>
    <button>
    Sin Estilo
    </button>
  </div>
  
  <div id="articulo">
  <h1>
  Hola soy un titulo
  </h1>
  <p>
  Mauris tristique justo massa, volutpat fermentum nisl tincidunt sed. Donec eleifend gravida magna mollis cursus. Cras ut vulputate orci. Ut bibendum justo eu sollicitudin eleifend. Nulla nunc lorem, mattis condimentum diam at, tincidunt iaculis orci. Suspendisse ornare diam id enim tristique, sit amet tempus magna sodales.
  </p>
  <p>
  Vestibulum sagittis eros a velit ultrices consectetur. Quisque ac tempus sem. Mauris lorem elit, venenatis nec ex non, tristique lobortis dolor. Donec facilisis nunc lacinia urna dignissim posuere. Fusce faucibus vehicula lorem id laoreet. Maecenas eget tellus porta, rhoncus nisl nec, convallis sem. Aliquam erat volutpat. Cras scelerisque imperdiet tristique. Nam iaculis consectetur dui eu pulvinar. Mauris ac mauris nec nunc efficitur condimentum id eget nibh.
  </p>
  </div>
</div>

SCSS

//PARA COMPILAR ESTO, utilizar http://www.sassmeister.com/
@import url(//fonts.googleapis.com/css?family=Baloo+Da|Indie+Flower|Open+Sans);

.spongebob {
  background-image: url("https://i.ytimg.com/vi/dftYKPXWLmY/maxresdefault.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  
  .menu {
    text-align: center;
    background-color: orange;
    padding: 10px;
    margin-top: 20px;
    
     button {
      font-family: 'Baloo Da', cursive;
      font-size: 16px;
      background-color: #F5E206;
      color: #000;
      width: 150px;
      border: 0;
      
      &:hover {
      cursor: pointer;
      background-color: #F0CB05;
      }
    }
   }
   
   #articulo {
     margin-top: 100px;
     padding-bottom: 200px;
   
     h1 {
       font-family: 'Baloo Da', cursive;
       color: white;
       background-color: rgba(244,68,3,0.5)
     }
     
     p {
       margin: 20px;
       font-family: 'Open Sans', sans-serif;
       color: black;
       background-color: rgba(245,226,6,0.5)
     }
   }
}
.ochentas {
  padding: 20px;
  background-color: #FFFB0C;
  padding-bottom: 120px;
  background-image: url("https://shechive.files.wordpress.com/2011/12/a-80s-fashion-11.jpg");
  background-repeat: no-repeat;
  background-position: right bottom;
  
  .menu {
    text-align: center;
  
    button {
      font-family: 'Indie Flower', cursive;
      font-size: 18px;
      background-color: #F402B4;
      color: #02248E;
      width: 80px;
      border: 0;
    }
    
    button:hover {
      cursor: pointer;
      color: #F0CB05;
    }
  }
  
  h1 {
    font-family: 'Indie Flower', cursive;
    color: #02248E;
    text-align: center;
    font-size: 42px;
  }
  
  p {
    font-family: 'Open Sans', sans-serif;
  }
}

JavaScript

$(function(){
  var botones = $('.menu').find('button');
  var divContenido = $('#contenido');

  botones.on('click', function(event){
    var boton = $(this);
    var style = boton.data('style');

		//Quita todas las clases antes de agregar una nueva
    divContenido.removeClass();

    if(style !== undefined){
      divContenido.addClass(style);
    }
    
  })
})