title: Tabs with onclick activates other css style AND shows it's specific content
body: <p>I'm very new to all the Java/Jquery, but for my site I want to use it.</p>
  
  <p>There's this problem; I'm trying to make some fancy tab-style navigation. The point is that if I use the "onclick" in HTML5 it won't do more than one activity.</p>
  
  <p>What I have:</p>
  
  <p>HTML/JAVA/CSS:</p>
  
  <pre><code>    &lt;!-- this are the buttons to press for showing content. --&gt;
  
          &lt;div id="MENU1" class="active" onclick="showHide('1');"&gt;&lt;center&gt;1&lt;/center&gt;&lt;/div&gt;
          &lt;div id="MENU2" class="inactive" onclick="showHide('2');"&gt;&lt;center&gt;2&lt;/center&gt;&lt;/div&gt;
          &lt;div id="MENU3" class="inactive" onclick="showHide('3');"&gt;&lt;center&gt;3&lt;/center&gt;&lt;/div&gt;
          &lt;div id="MENU4" class="inactive" onclick="showHide('4');"&gt;&lt;center&gt;4&lt;/center&gt;&lt;/div&gt;
  
          &lt;div id="CONTAINER"&gt;
          &lt;!-- here should appear text --&gt;
          &lt;div id="CONTENT1"&gt;here somehow wil appear content 1&lt;/div&gt;
          &lt;div id="CONTENT2"&gt;here somehow wil appear content 2&lt;/div&gt;
          &lt;div id="CONTENT3"&gt;here somehow wil appear content 3&lt;/div&gt;
          &lt;div id="CONTENT4"&gt;here somehow wil appear content 4&lt;/div&gt;
          &lt;/div&gt;
  
      &lt;script type="text/javascript"&gt; 
      function showHide(divId){
          var theDiv = document.getElementById(divId);
          if(theDiv.style.display=="none"){
              theDiv.style.display="block";
          }else{
              theDiv.style.display="none";
          }    
      }
      &lt;/script&gt;
  
  
  &lt;!-- the style of the buttons have to change from .inactive to .active --&gt;
      &lt;style&gt;
      .active{
          color:#FF6a00;
          background-image:url(images/blackbck.png);
          background-repeat:round;
          background-size:cover;
      }
  
      .inactive{
          color:black;
          background-image:url(images/orangebck.png);
          background-repeat:round;
          background-size:cover;
      }
      &lt;/style&gt;
  </code></pre>
  
  <p>Could someone help me with this?</p>
  
  <p>Summary:</p>
  
  <ul>
  <li>The buttons should be changing styles.</li>
  <li>Content should appear by clicking button.</li>
  <li>By clicking some other button, the old content should be hidden.</li>
  </ul>