[AJAX] Onglets répétés pas tous actifs
Bonjour à tous,
j'aimerais savoir s'il est possible sur une même page de répéter des "boites" d'onglets. Je m'explique. J'ai une page produit liée à une base de donnes. Cette page affiche les différents produits de la base de données. Chacun de ces produit est dans un cadre avec 4 onglets à chaque fois.
J'ai réussi à intégrer les onglets mais sur mes X produits (où les onglets apparaissent) seules les premiers onglets sont actifs (ceux du produit 1) les autres n'ont aucun effet.
Je ne sais pas comment arriver à ce que chacun des onglets des différents produits soient actifs pour chacun des produits.
Quelqu'un sait-il m'aider ou m'orienter?
Merci
Voici mon code si ça peut aider
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
| <!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_onglets2.css" rel="stylesheet" type="text/css" media="screen" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
function loadit( element)
{
var container = document.getElementById('container');
container.src=element.rel;
var tabs=document.getElementById('tabs').getElementsByTagName("a");
for (var i=0; i < tabs.length; i++)
{
if(tabs[i].rel == element.rel)
tabs[i].className="selected";
else
tabs[i].className="";
}
}
function startit()
{
var tabs=document.getElementById('tabs').getElementsByTagName("a");
var container = document.getElementById('container');
container.src = tabs[0].rel;
}
window.onload=startit;
</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 du 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>';
/*---------------------------*/
echo '<td>';
echo '<div id="tabs">';
echo '<ul>';
echo '<li><a href="tech_fich.php?id='.$donnees['reference'].'" target="mainFrame"onclick="loadit(this)">General informations</a></li>';
echo '<li><a href="tech_fich.php?id='.$donnees['reference'].'" target="mainFrame" onclick="loadit(this)">Outside dimensions</a></li>';
echo '<li><a href="tech_fich.php?id='.$donnees['reference'].'" target="mainFrame" onclick="loadit(this)">Inside dimensions</a></li>';
echo '<li><a href="tech_fich.php?id='.$donnees['reference'].'" target="mainFrame" onclick="loadit(this)">Other informations</a></li>';
echo '</ul>';
echo '<iframe id="containe"></iframe>';
echo '</div>';/*Fin de DIV tabs*/
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">
<p>Copyright FU YUAN ELECTRONICS - Design by sealight</p>
</div><!--Fin de copy-->
</body>
</html> |
