Javascript, problème navigation onglet

Bonjour a tous,

Merci déjà pour la lecture de ce poste, espéreront que vous y répondiez ! :p

Je souhaite faire une navigation dans un tableau avec des onglets en Javascript.
Tous le code fonctionne (quand on clic sur l'onglet 4, on a le contenu du 4)
Mais j'ai demandé à ce que l'onglet 1 soit le premier visible. Et je souhaiterais que le contenu de l'onglet 1 soit aussi le premier et le seul visible !
Là je n'ai que le "bouton" onglet 1 qui est activé par défaut en premier, mais j'ai le contenu de tous les onglets affichés !

Ce que je souhaiterais avoir au premier affichage :

+--------------------------------------------------------+
|                |                        |              |
|                |                        |              |
|  Onglet1(act)  |                        |    Onglet4   |
|  Onglet2       |         cont 1         |    Onglet5   |
|  Onglet3       |                        |    Onglet6   |
|                |                        |              |
+--------------------------------------------------------+
(cont=contenu ; act=actif)

Ce que j'ai actuellement :

+--------------------------------------------------------+
|                |         cont 1         |              |
|                |         cont 2         |              |
|  Onglet1(act)  |         cont 3         |    Onglet4   |
|  Onglet2       |         cont 4         |    Onglet5   |
|  Onglet3       |         cont 5         |    Onglet6   |
|                |         cont 6         |              |
+--------------------------------------------------------+

Sans plus attendre, le code :

<script type="text/javascript">
   //<!--
   // La fonction Javascript va permettre de changer d'onglet lorsque l'on clique sans recharger la page.
   // Le principe est simple. Le cadre g?rant le contenu que l'on souhaite voir recoit la calver onglet_actif alors que les autres recoivent onglet_inactif pour les cacher.
      function change_onglet(name)
      {
         document.getElementById('onglet_'+anc_onglet).className = 'onglet_inactif bloc_general_onglet';
         document.getElementById('onglet_'+name).className = 'onglet_actif bloc_general_onglet';
         document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
         document.getElementById('contenu_onglet_'+name).style.display = 'block';
         anc_onglet = name;
      }
   //-->
   </script>
   
   <style type="text/css">
	
   #recap
   {
		width:480px; 
		height:200px; 
		margin:auto; 
		padding-top: 5px;
		background-color:#060606;
		border-radius: 15px;
   }
   
   #recap_table
   {
		width:450px; 
		height:160px; 
		margin-top: 15px;
		margin-left: auto;
		margin-right: auto;
		padding-top: 5px;
		background-color:#ffffff;
		border-radius: 15px;
   }
   
   #table
   {
		width:440px; 
		height:150px; 
		margin-left: auto;
		margin-right: auto;
		padding-top: 5px;
		text-align:center;
		background-color:#ffffff;
   }
   
     .bloc_general_onglet
   {
      display:inline-block;
      margin-left:1px;
      margin-right:1px;
      padding:1px;
      cursor:pointer;
   }
   
      .onglet_inactif
   {

   }
   .onglet_actif
   {
      background:#040202;
   }

   </style>

	<div id="recap">
		<div id="recap_table">
			<table id="table">
				<tr>
					<td style="width:80px;"> 
						<!--cellule gauche 1-->
						<div class="ongletgauche">
							<span class="onglet_inactif bloc_general_onglet" id="onglet_1" onclick="javascript:change_onglet('1');">Onglet 1</span>
							<br/>
							<br/>
							<span class="onglet_inactif bloc_general_onglet" id="onglet_2" onclick="javascript:change_onglet('2');">Onglet 2</span>
							<br/>
							<br/>
							<span class="onglet_inactif bloc_general_onglet" id="onglet_3" onclick="javascript:change_onglet('3');">Onglet 3</span>
						</div>

					</td>
					<td style="width:280px;" bgcolor="#333333">
						<!--cellule principal milieu-->
						<div class="systeme_onglets">
							<div class="contenu_onglets">
								<div class="contenu_onglet" id="contenu_onglet_1">
									blabla onglet 1
								</div>
								<div class="contenu_onglet" id="contenu_onglet_2">
									blabla onglet 2
								</div>
								<div class="contenu_onglet" id="contenu_onglet_3">
									blabla onglet 3
								</div>
								<div class="contenu_onglet" id="contenu_onglet_4">
									blabla onglet 4
								</div>
								<div class="contenu_onglet" id="contenu_onglet_5">
									blabla onglet 5
								</div>
								<div class="contenu_onglet" id="contenu_onglet_6">
									blabla onglet 6
								</div>
							</div>
						</div>
					</td>
					<td style="width:80px;">
						<div class="ongletgauche">
							<span class="onglet_inactif bloc_general_onglet" id="onglet_4" onclick="javascript:change_onglet('4');">Onglet 4</span>
							<br/>
							<br/>
							<span class="onglet_inactif bloc_general_onglet" id="onglet_5" onclick="javascript:change_onglet('5');">Onglet 5</span>
							<br/>
							<br/>
							<span class="onglet_inactif bloc_general_onglet" id="onglet_6" onclick="javascript:change_onglet('6');">Onglet 6</span>
						</div>
					</td>
				</tr>
			</table>
		</div>
	</div>
							<script type="text/javascript">
							//<!--
							var anc_onglet = '1'; // Cette ligne informe qu'on va en premier voir l'onglet 1
							change_onglet(anc_onglet);
							//-->
						</script>

Merci énormément aux personnes qui aideront ce pauvre petit codeur du dimanche que je suis ! :)