J'ai un problème d'onglets.
j'ai une page produits qui fait appel à une base de données. Cette page affiche la liste des produits par catégories sous forme de "fiche (=1 cadre par produits)". Dans chacun de ces cadres apparait un tableau à onglets qui permet de visualiser les différentes données techniques par produits.
L'affichage des onglets se fait correctement malheureusement quand je clique sur l'un des signets de l'un des produits de ma liste de produits, ce sont toujours les signets de mon premier produit (tête de liste) qui change.
J'ai également mis une boucle pour changer les id de mes onglets ainsi que des contenus mais cela n'arrange rien.
Comment cela ce fait?
Pour les onglets, je me suis inspiré du tutorial ici : http://www.johnstyle.fr/langage/java...ts-facilement/
et voici ma page qui pose problème: http://www.fuyuanelectronics.cn/prod...main_container
Quelqu'un a-t-il une idée? Je suis débutant en PHP et ignorant en Java.
Merci d'avance pour votre aide.
Voici mon code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>FU YUAN ELECTRONICS - <?php
echo $_GET['titre'];
?></title>
<link rel="stylesheet" media="screen" type="text/css" title="stylesheet_main" href="CSS/stylesheet_main.css"/>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" media="screen" />
<link href="CSS/stylesheet_list.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="CSS/style_onglets.css" rel="stylesheet" type="text/css" media="screen" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
function changeOnglet(_this)
{
var getOnglets = document.getElementById('mes_onglets').getElementsByTagName('li');
for(var i = 0; i < getOnglets.length; i++)
{
if(getOnglets[i].id)
{
if(getOnglets[i].id == _this.id)
{
getOnglets[i].className = 'mon_onglet_selected';
document.getElementById('c' + _this.id).style.display= 'block';
}
else{
getOnglets[i].className = 'mon_onglet';
document.getElementById('c' + getOnglets[i].id).style.display= 'none';
}
}
}
}
</script>
</head>
<body>
<div id="main_container"><!--Cadre principal-->
<div id="shadow_sup"></div><!--Ombre sup-->
<div id="container_sup">
<div id="container"><!--Sous Cadre-->
<div id="header"><!--en-tete de page SLOGAN -->
<div id="logo"><!--emplacement pour le logo principal--></div>
</div>
<!--Fin de Header-->
<div id="ligne1"><!--ligne 1 déco--> </div>
<div id="banner"><!--visuel principal--></div>
<div id="ligne1"><!--ligne 1 Déco--> </div>
<div id="ligne2"><!--ligne 2 Déco--> </div>
<div id="menu"> <!--barre de menu principale-->
<?php
include ("menu_bar.php");
?>
</div><!--Fin de barre de menu principal-->
<div id="central_frame"><!--cadre principal contenant les infos-->
<div id="fiche_prod"><!--Affichage fiche produits-->
<?php
include ("connexion_inc.php");
include ('security_safe_menu.php');
echo"</p>";
//*Connexion à partir de la page d'appel*//
$idcom=connex("fuyuanbd", "myparam");
$choix=mysql_escape_string($_GET['id']);
$requete="SELECT images.reference, images.images_bd, products.Description, categories_prod.libel FROM images, products, prd_categories, categories_prod WHERE categories_prod.code_cat='$choix' AND categories_prod.code_cat=prd_categories.code_cat AND prd_categories.id_prod=products.id_prod AND products.id_prod=images.id_prod";
$result=mysql_query($requete, $idcom) or die (mysql_error());
if(!$result)
{
echo "Lecture impossible";
}
else
{
$nbcol=mysql_num_fields($result);
$nbart=mysql_num_rows($result);
//****************//
//Début du tableau//
//****************//
echo '<br />';
echo '<br />';
echo '<br />';
echo '<h2 id="Page_title">'.$_GET['titre'].'</h2>';
echo '<hr>';
while($donnees=mysql_fetch_array($result))
{
echo '<div>';/*DIV Tableau_prod*/
echo "<table id='tableau_prod'>";
echo "<tr>";
/*Affichage reference produit*/
echo '<td colspan="2" id="ref" height=10px><a href="tech_fich.php?id='.$donnees['reference'].'">'.$donnees['reference'].'</td>'."\n";
echo '</tr>';
echo '<tr>';
/*---------------------------*/
/*Debut affichage par onglets*/
/*---------------------------*/
echo '<td>';
echo '<div id="mes_onglets">';/*DIV Création des onglets*/
for ($i=0 ;$i<4 ; $i++)
{
echo '<ul>';
echo '<li id="o_"$i class="mon_onglet_selected" onclick="changeOnglet(this);">General Informations</li>';
echo '<li id="o_"$i class="mon_onglet" onclick="changeOnglet(this);">Outside Dimensions</li>';
echo '<li id="o_"$i class="mon_onglet" onclick="changeOnglet(this);">Inside Dimensions</li>';
echo '<li id="o_"$i class="mon_onglet" onclick="changeOnglet(this);">Other informations</li>';
echo '<div class="clear"></div>';
echo '</ul>';
echo '</div>';/*FIN DIV mes_onglets*/
echo '<div id="mes_contenus">';/*DIV Partie contenu*/
echo '<div id="co_"$i class="mon_contenu">';/*DIV mon_contenu*/
echo "<table>";/*Affichage onglet_1_General Informations*/
echo "<tr>";
echo "<td id='image'><img src=".$donnees['images_bd']."></td>";
echo '<td id="description"><h3><u>Description</u></h3>'.$donnees['Description'].'<br /><a href="#main_container" id="back_top">Top</a></td>';
echo '</tr>';
echo '</table>';/*Fin de Onglet_1*/
echo '</div>';/*FIN DIV mon_contenu*/
/*DIV Affichage Onglet 2*/
echo '<div id="co_"$i class="mon_contenu" style="display: none;">';
echo '<table id="fiche" border="2">';
echo "<caption>".$donnees['reference']."</caption>";
echo "<tr>";
echo '<td id="image_frame" rowspan="2"><img src='.$donnees['images_bd'].'></td>';
echo '<td>'.$donnees['reference'].'</td>';
echo '<td>'.$donnees['reference'].'</td>';
echo "</tr>";
echo "<tr>";
echo "<td>".$donnees['reference']."</td>";
echo "<td>".$donnees['reference']."</td>";
echo "</tr>";
echo "<tr>";
//********************************
//Début tableau données produits *
//------------------------------ *
//********************************
echo "<td colspan=\"3\">";
echo "<br />";
echo "<table id='tab_dim'>";/*Debut tab_dim*/
echo "<thead>";
echo "<tbody>";
echo "<tr>";
echo "<th>Height</th>";
echo "<th>Width</th>";
echo "<th>Depth</th>";
echo "<th>Weight</th>";
echo "<th>Volume</th>";
echo "</tr>";
echo "<tr id='dot_line'>";
echo "<td>".$donnees['in_height']."</td>";
echo "<td>".$donnees['in_width']."</td>";
echo "<td>".$donnees['in_depth']."</td>";
echo "<td>".$donnees['weight']."</td>";
echo "<td>".$donnees['in_volume']."L</td>";
echo "</tbody>";
echo "</thead>";
echo "</table>";
echo "</td>";
echo "</tr>";
}
echo "</table>";/*Fin de tab_dim*/
echo '</div>';/*FIN DIV Onglet 2*/
echo '<div id="co_"$i class="mon_contenu" style="display: none;">Mon contenu 3</div>';
echo '<div id="co_"$i class="mon_contenu" style="display: none;">Mon contenu 4</div>';
echo '</div>';
echo '</td>';
echo '<br />';
echo '<br />';
}
echo "</tr>";
echo "</table>";/*Fin de tab_prod*/
echo "<br />";
}
echo "</div>";
mysql_free_result($result);
echo "<br />";
?>
</div>
</div><!--Fin de central_frame-->
<div id="ligne1"><!--ligne 1 Déco--> </div>
<div id="footer"><!--Bas de page--> </div>
</div><!--Fin de Sous Cadre-->
</div><!--Fin de container_sup-->
<div id="shadow_inf"></div><!--Ombre inf-->
</div><!--Fin de main_container-->
<div id="copy">
</div><!--Fin de copy-->
</body>
</html>