Удобные Вкладки-Табы с использованием CSS и JS

function showtab(id){
names = new Array ("tabname_1","tabname_2","tabname_3","tabname_4"); //массив id заголовков табов
conts= new Array ("tabcontent_1","tabcontent_2","tabcontent_3","tabcontent_4"); //массив id табов
for(i=0;i<names.length;i++) {
document.getElementById(names[i]).className = 'nonactive';
}
for(i=0;<conts.length;i++) {
document.getElementById(conts[i]).className = 'hide';
}
document.getElementById('tabname_' + id).className = 'active';
document.getElementById('tabcontent_' + id).className = 'show';
}

<div id='tabname_1' onclick="showtab('1')" class='active'><u>Вкладка 1</u></div>
<div id='tabname_2' onclick="showtab('2')" class='nonactive'><u>Вкладка 2</u></div>
<div id='tabname_3' onclick="showtab('3')" class='nonactive'><u>Вкладка 3</u></div>
<div id='tabname_4' onclick="showtab('4')" class='nonactive'><u>Вкладка 4</u></div>
 
<div id='tabcontent_1' class='show'>Содержимое вкладки 1</div>
<div id='tabcontent_2' class='hide'>Содержимое вкладки 2</div>
<div id='tabcontent_3' class='hide'>Содержимое вкладки 3</div>
<div id='tabcontent_4' class='hide'>Содержимое вкладки 4</div>

#tabbs {
 position:relative;
 padding:20px; margin:0 auto;
 background-color:#fff;
 width: 1006px;
 min-width:1006px;
 height:130px;
}
div{
 font-family:verdana;
 font-size:11px;
}
.content div{
 padding:20px;
 height:50px;
 color:black;
 background-color:#E7EFF5;
}
.hide{ /* скрываем вкладку */
 display:none;
}
.show{ /* показываем вкладку */
 display:block;
 color:red;
}
.nonactive{ /* неактивная вкладка */
 background-color:#fff;
 cursor:pointer;
 color:#3794DA;
}
.active{ /* активная вкладка */
 background-color:#E7EFF5;
 border-top:#C40000 2px solid;
 cursor:default;
 color:#000;
 font: bold 12px Tahoma;
}