jQuery addClass example

Change class name on click in jQuery

by Roger Sanchez

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="report-main">
  <h2>¿QUÉ TAN DIGITAL ES <b>ROGER</b>?</h2>

  <div id="dcir">
    <div class="box-content">
      <h2 class="vertical-align">
        DCIR
      </h2>
    </div>
    <div class="box-content">
      <div class="box-small">
        <p class="vertical-align">Alto</p>
      </div>
      <div class="box-small">
        <p class="vertical-align">Medio</p>
      </div>
      <div class="box-small">
        <p class="vertical-align">Bajo</p>
      </div>

      <span class="top">>=80%</span>
      <span class="bottom">>=50%</span>
    </div>
  </div>
  <div class="arrow-vertical-top">
    <div></div>
  </div>
  <div id="Report">
    <div class="box-s1">
      <div id="highDigital-lowPotential" class="bx rectangle-horizontal bg-color-crema ">
        <p class="txt-center txt-color-black txt-bold">
          Alto Digital & <br \>
          <span>Bajo Potencial </span>
        </p>
      </div>
      <div id="None" class="bx rectangle-vertical bg-color-black ">
        <p class="vertical-align txt-color-white">
          Sin Registros
        </p>
      </div>
      <div id="lowDigital-lowPotential" class="bx rectangle-vertical bg-color-green ">
        <p class="txt-center txt-color-black txt-bold txt-middle-align">
          Bajo Digital & <br \> <span>Bajo Potencial</span>
        </p>
      </div>

    </div>
    <div class="box-s2">
      <div id="highDigital-highPotential" class="bx rectangle-horizontal bg-color-yellow ">
        <p class="txt-center txt-bold">
          Alto Digital & <br \> <span>Alto Potencial</span>
        </p>
      </div>
      <div id="lowDigital-highPotential" class="bx square bg-color-red ">
        <p class="txt-center txt-color-white txt-bold">
          Bajo Digital & <br \> <span>Alto Potencial</span>
        </p>
      </div>
   ...

SCSS

h2{
  margin: 30px auto;
  
  text-align: center;
  font-weight: 300;
 
}
button {
  margin:5px 10px;
  padding:10px;
  cursor:pointer;
}


#report-main {
    font-family:arial;
    width: 681px;
    border: 1px solid #e4e4e4;
    overflow: hidden;
    padding: 20px 30px;
    margin: 20px;
}

#dcir,#wai{position:relative;}
#dcir p, #wai p{color:#bababa;font-size:18px}
#dcir{
   float:left;
   width: 70px;
   height: 285px;
   right: 22px;
}
#dcir h2{
    top: 0;
    display: block;
    height: 284px;
    text-align: center;
    font-weight:bold;
}
#dcir span{
    position:absolute;
}
#dcir span.top{
    top: 64px;
    right: -21px;
}
#dcir span.bottom{
    top: 175px;
    right: -21px;
}

#dcir .box-content{
    float: left;
    height: 284px;
    width: 30px;
}
#dcir .box-small{
    height: 93px;
}


#wai{
   float:left;
   width: 600px;
   height: 95px;
   margin-left: 78px;
}
#wai h2{
    display: block;
    width: 597px;
    text-align: center;
    font-weight:bold;
    margin: 0;
}

#wai span{
    position:absolute;
}
#wai span.left{
    top: 6px;
    left: 136px;
}
#wai span.right{
    top: 6px;
    right: 287px;
}

#wai .box-content{
    float: left;
    height: 44px;
}
#wai .box-small{
    float: left;
    height: 40px;
    width: 147px;
    text-align: center;
}


#Report{
    float:left;
    border-right: 1px solid #fef3fe;
    width: 600px;
    height: 277px;
}

#Report .box-s1, #Report .box-s2{
  float:left;
  width: 300px;
  height: 250px;
  cursor:pointer;
  position: relative;
}
#Report p {
    z-index: 2;
    font-weight: bold;
    position: relative;
    text-align: center;
}

#Report .rectangle-horizontal{
  top: 0;
  position: absolute;
  height: 77px;
  width: 300px;
}

#Report .square{
  top: 77px;
  position: absolute;
  height: 200px;
  width: 100%;
}

.square p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

#Report .rectangle-vertical {
   float: left;
...

JavaScript

function btnActive(box) {
  $('.bx').removeClass("active");
  $('#leyenda span').removeClass();

  switch (box) {
    case 'highDigital_lowPotential':
      $('#highDigital-lowPotential').addClass("active");
      $('#leyenda span').addClass("bg-color-crema active");
      break;
    case 'highDigital_highPotential':
      $('#highDigital-highPotential').addClass("active");
      $('#leyenda span').addClass("bg-color-yellow active");
      break;
    case 'None':
      $('#None').addClass("active");
      $('#leyenda span').addClass("bg-color-black active");
      break;
    case 'lowDigital_lowPotential':
      $('#lowDigital-lowPotential').addClass("active");
      $('#leyenda span').addClass("bg-color-green active");
      break;
    case 'lowDigital_highPotential':
      $('#lowDigital-highPotential').addClass("active");
      $('#leyenda span').addClass("bg-color-red active");
      break;
    default:    	
      break;
  };

};