title: RemoveClass AddClass When Page Load
body: <p>I have several <code>&lt;div&gt;</code> tags with different class names.
  When the page loads, I want to remove and add another class in a certain <code>&lt;div&gt;</code>, but somehow it doesn't work as expected.</p>
  
  <p><a href="http://jsfiddle.net/p8snuxfc/2/" rel="nofollow">LIVE CODE</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="redBG"&gt;
      &lt;div class="yellowIcon"&gt;&lt;/div&gt;
  &lt;/div&gt;   
  &lt;div class="greenBG"&gt;
      &lt;div class="yellowIcon"&gt;&lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.redBG{
      background-color:red;
      width: 300px;
      height:30px;
      z-index: 1;
  }
  .yellowIcon{
      background-color:yellow;
      width: 20px;
      height:20px;
      cursor: pointer;
      z-index:20;
  }
  .greenBG{background-color:green}
  
  .black{background-color:black}
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$('div, .redBG').load(
      function()
      {
          $(this).removeClass('.redBG').addClass('.black');
      }
  );
  </code></pre>