Вкладки с помощью onclick активируют другой стиль CSS и показывают его конкретное содержимое

Css для активных

.active{ color:#FF6a00!important; background-image:url(images/blackbck.png)!important; background-repeat:round; background-size:cover; }

Сначала добавьте библиотеку jQuery в начало

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

Добавить класс во все содержимое, как это:

<div id="CONTENT1" class="content">here somehow wil appear content 1</div>

Удалите onclick для всех div и добавьте кнопку класса:

<div id="MENU1" class="active inactive button"><center>1</center></div>

Попробуйте это:

<script>
$(document).ready(function(){
    $('.content').css('display','none');
    $('#CONTENT1').css('display','');
    $('#MENU1').click(function(){
        $('.button').removeClass('active');            
        $(this).addClass('active');
        $('.content').fadeOut(300);
        $('#CONTENT1').fadeIn(300);
    });
    $('#MENU2').click(function(){
        $('.button').removeClass('active');            
        $(this).addClass('active');
        $('.content').fadeOut(300);
        $('#CONTENT2').fadeIn(300);
    });
    $('#MENU3').click(function(){
        $('.button').removeClass('active');            
        $(this).addClass('active');
        $('.content').fadeOut(300);
        $('#CONTENT3').fadeIn(300);
    });
    $('#MENU4').click(function(){
        $('.button').removeClass('active');            
        $(this).addClass('active');
        $('.content').fadeOut(300);
        $('#CONTENT4').fadeIn(300);
    });
});    

С эффектами fadeIn/Out. Если вы не хотите менять.css('display', 'none')/.css('display', '')

Просто добавьте эту строку после function showHide(divId) {:

var divId = 'CONTENT'+divId;

JSFIDDLE

В соответствии с тем, что я понял,

ОБНОВЛЕННАЯ ДЕМОГРАФИЯ JSFIDDLE

HTML

<button id="MENU1" class="active" onclick="showHide('1');"><center>1</center></button>
        <button id="MENU2" class="inactive" onclick="showHide('2');"><center>2</center></button>
        <button id="MENU3" class="inactive" onclick="showHide('3');"><center>3</center></button>
        <button id="MENU4" class="inactive" onclick="showHide('4');"><center>4</center></button>

        <div id="CONTAINER"></div>

JS

function showHide(divId){
    $("button").removeClass("active");
    var id = "MENU" + divId;
    var theDiv = document.getElementById(id);
      $(theDiv).addClass("active"); 

    var data = "<div id='CONTENT'" + divId + ">here somehow wil appear content " + divId + "</div>";
    var print = document.getElementById("CONTAINER");
    print.innerHTML = data;   
}

Как указывали другие ребята, ваша первая проблема здесь:

var theDiv = document.getElementById(divId);

это должно быть скорее:

var theDiv = document.getElementById("CONTENT" + divId);

вы передаете только "1" функции showHide, а затем вы используете document.getElementById для поиска элемента с идентификатором = "1", вместо ID = "CONTENT1",

Во-вторых - и то, что другие парни не отметили! , блок else {} не будет делать то, что вы ожидаете от него, - он просто скроет div с divId, а не все остальные divs. Ваша функция исправлена:

function showHide(divId){

    //getting all content divs
    var divs = document.getElementById("CONTAINER").childNodes;
    //iterating each of the content divs
    for(var i = 0; i < divs.length; i++){
        //getting id of a current div
        var currentId = divs[i].getAttribute('id'); 
        //if the id fits we want to show the div
        if(currentId === "CONTENT" + divId ){
            divs[i].style.display="block";
        }else{ //otherwise hide it
            divs[i].style.display="none";
        }
    }
}

Середине, что я не занимался изменением стиля здесь. Жоао Пауло дал правильный ответ, но он включает jQuery.

Оффтопик:

Вместо использования тега CENTER всегда используйте стили! В твоем случае:

#MENU1, #MENU2, #MENU3, #MENU4{
text-align: center
}

У вас есть ошибка в коде, вы передаете '1' функции showHide(), а затем с помощью document.getElementById('1'); нет элемента html с этим id, попробуйте передать идентификатор содержимого div, который вы хотите показать.

<div id="MENU1" class="active" onclick="showHide('CONTENT1');"><center>1</center></div>

или сделать что-то подобное.

<div id="MENU1" class="active" onclick="showHide('1');"><center>1</center></div>

то в вашей функции javascript сделайте это.

var theDiv = document.getElementById('CONTENT'+divId);
if(theDiv.style.display=="none"){
    theDiv.style.display="block";
} else{
    theDiv.style.display="none";
}   

вы можете сделать это также так:

//HTML
<div data-tab="1" id="MENU1" class="tab-navi active" onclick="showHide('1');"><center>1</center></div>
<div data-tab="2" id="MENU2" class="tab-navi" onclick="showHide('2');"><center>2</center></div>

<div id="CONTAINER">
    <!-- here should appear text -->
    <div class="tab-content" id="CONTENT1">here somehow wil appear content 1</div>
    <div class="tab-content"  id="CONTENT2">here somehow wil appear content 2</div>
</div>
//JQUERY
$("div.tab-navi").on("click", function(){
    var $this = $(this);
    var id = $this.attr("data-tab");
    $("div.tab-content").hide(); //Hide all
    $(".tab-navi").removeClass("active");
    $("#CONTENT"+id).show();
    $this.addClass("active");
});
//CSS
.tab-navi.active{
    color:#FF6a00;
    background-image:url(images/blackbck.png);
    background-repeat:round;
    background-size:cover;
}

.tab-navi{
    color:black;
    background-image:url(images/orangebck.png);
    background-repeat:round;
    background-size:cover;
}

здесь скрипка: http://jsfiddle.net/bs8gG/