Sujets similaires

Bonjour & merci de lire ce post.

Enfaites, vous aviez dis que ce tutoriel: http://www.css-actif.com/t4747-organisation-par-onglets
Pouvais être réaliser sur une page html ou sur la P.A du forum.

Malheureusement, sur la page html, une fois le code mis, on ne peux pas changer d'onglet, apercu:
http://concours-oh-my-dollz.forumgratuit.org/h1-journal-de-sansoverdose
[Je veux mettre les onglets dans la div].

Pour le script, je l'ai mis dans la description du forum + à la fin de la page HTML.

Pouvez-vous m'aidez & m'expliquez pourquoi les onglets ne changent pas ?

Merci d'avance.

Alikse

Bonsoir Alikse !

Très rapidement et très simplement : tu as mis du HTML dans ton fichier javascript (ce doit être du JS vu que tu le charge dans une balise script).

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" dir="ltr" id="min-width" lang="fr" xml:lang="fr" ><head><title>Organisation par Onglets</title><meta http-equiv="content-type" content="text/html; charset=utf-8" /><meta http-equiv="content-script-type" content="text/javascript" /><meta http-equiv="content-style-type" content="text/css" /><link rel="shortcut icon" type="image/x-icon" href="http://2.bp.blogspot.com/-325_ErlLVKI/TpkxAzFmIQI/AAAAAAAAEV0/EAQJrQKnd5A/s1600/Acodero+In" /><meta name="title" content="Organisation par Onglets" /><link rel="stylesheet" href="/65-ltr.css" type="text/css" /><link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="SansOverdose" /><link rel="search" type="application/opensearchdescription+xml" href="http://www.annuairedeforums.com/fr/search/improvedsearch.xml" title="Rechercher des forums" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script><script src="http://illiweb.com/rs3/45/frm/lang/fr.js" type="text/javascript"></script><script type="text/javascript">//<![CDATA[
$(document).ready(function(){});//]]></script><script src="/99054.js" type="text/javascript"></script>

<script type="text/javascript">$(document).ready(function() {$(".cssactif_progressif").css("display", "none");$(".cssactif_progressif").fadeIn(500);});</script><script language="javascript" src="http://concours-oh-my-dollz.forumgratuit.org/h2-organisation-par-onglets"></script></head><body background="http://i77.servimg.com/u/f77/16/86/35/06/dsc04110.jpg" bgcolor="#b9deab" text="#000000" link="#666666" vlink="#666666"><a name="top"></a><table class="bodylinewidth" width="800" cellspacing="0" cellpadding="10" border="0" align="center"><tr><td class="bodyline"><table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td align="center" width="100%" valign="middle"><a href="/"><img src="http://zupimages.net/up/2/321092146.png" id="i_logo" border="0" alt="SansOverdose" vspace="1" /></a><br /><div class="maintitle"></div><br /><span class="gen"><script language=javascript src=http://concours-oh-my-dollz.forumgratuit.org/h2-organisation-par-onglets></script> Un forum gratuit et ouvert à tous parlant de OMD, affichant les astuces et soluces et répondant à toutes les questions d'Oh my dollz.<br /> </span></td><div id="google_translate_element"></div><script>function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'fr'}, 'google_translate_element');}</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script></tr></table><table cellspacing="0" cellpadding="0" border="0" align="center"><tr><td align="center"><a class="mainmenu" href="/" rel="nofollow"><img id="i_icon_mini_index" src="http://2img.net/i/fa/empty.gif" border="0" height="13" hspace="2" alt="Accueil" title="Accueil" />Accueil</a> <a class="mainmenu" href="/calendar" rel="nofollow"><img id="i_icon_mini_calendar" src="http://2img.net/i/fa/empty.gif" border="0" height="13" hspace="2" alt="Calendrier" title="Calendrier" />Calendrier</a> <a class="mainmenu" href="/faq" rel="nofollow"><img id="i_icon_mini_faq" src="http://2img.net/i/fa/empty.gif" border="0" height="13" hspace="2" alt="FAQ" title="FAQ" />FAQ</a> <a class="mainmenu" href="/search" onclick="showhide(document.getElementById('search_menu')); return false;" rel="nofollow"><img id="i_icon_mini_search" src="http://2img.net/i/fa/empty.gif" border="0" height="13" hspace="2" alt="Rechercher" title="Rechercher" />Rechercher</a> <script type="text/javascript">//<![CDATA[
var url_search = '/search';
insert_search_menu();//]]>
</script><a class="mainmenu" href="/memberlist" rel="nofollow"><img id="i_icon_mini_members" src="http://2img.net/i/fa/empty.gif" border="0" height="13" hspace="2" alt="Membres" title="Membres" />Membres</a> <a class="mainmenu" href="/groups" rel="nofollow"><img id="i_icon_mini_groups" src="http://2img.net/i/fa/empty.gif" border="0" height="13" hspace="2" alt="Groupes" title="Groupes" />Groupes</a> <a class="mainmenu" href="/register" rel="nofollow"><img id="i_icon_mini_register" src="http://2img.net/i/fa/empty.gif" border="0" height="13" hspace="2" alt="S'enregistrer" title="S'enregistrer" />S'enregistrer</a> <a class="mainmenu" href="/login" rel="nofollow"><img id="i_icon_mini_login" src="http://2img.net/i/fa/empty.gif" border="0" height="13" hspace="2" alt="Connexion" title="Connexion" />Connexion</a> </td></tr></table><div style="clear: both;"></div><div id="page-body"><div id="emptyidcc" class="no-left"><table cellpadding="0" cellspacing="0" width="100%" class="three-col"><tbody><tr><td valign="top" width="0"><div id="emptyidleft"></div></td><td valign="top" width="100%"><div class="cssactif_progressif"><div class="e22f566 mainmenu"><script type="text/javascript">//<![CDATA[
function AT_adFillSlot(){document.write('<iframe src="http://www.adstune.com/admgt/?bg_color=ffffff&body_link=666666&text_color=000000&url_color=666666&dateid=406128&lang=fr&cat=210&force=1&ad_type=TD_text" name="fa_ads_frame" width="728" scrolling="no" height="90" frameborder="0" allowtransparency="true" marginheight="0" marginwidth="0" style="display:block!important;visibility:visible!important;"></iframe>');}
//]]>
</script><script type="text/javascript">//<![CDATA[
document.write('<scr'+'ipt type="text/javascript" src="http://nxtck.com/as.php?zid=36764&cachebuster=' + Math.random() + '&tcu=' + encodeURIComponent('http://tracking.com/') + '"></scr'+'ipt>');
//]]></script><br class="clear" /></div><div style="clear:both;"></div><style type="text/css">html body .e22f566,html body .e22f566 iframe,html body iframe[name="google_ads_frame"],html body .e22f566 iframe[name="google_ads_frame"],html body #wrap #page-body div.e22f566,html body #page-body .e22f566{display:block!important;visibility:visible!important;float:none!important;position:inherit!important;left:inherit!important;top:inherit!important;right:inherit!important;bottom:inherit!important;margin:0 auto!important;padding:inherit!important;filter:alpha(opacity=100)!important;-moz-opacity:1!important;-khtml-opacity:1!important;opacity:1!important;z-index:9999!important;text-align:center!important}html body .e22f566,html body .e22f566 iframe[name="google_ads_frame"]{width:728px!important;height:90px!important;min-height:90px!important}html body .e22f566 iframe{border:0px!important}html body iframe[name="google_ads_frame"]{width:100%!important;height:inherit!important;min-height:inherit!important}</style><div style="height:3px"></div>function changeOnglet(_this){
var getOnglets = document.getElementById('mes_onglets').getElementsByTagName('span');
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';
}
}
}
}</div></td><td valign="top" width="0"><div id="emptyidright"></div></td></tr></tbody></table></div></div><div id="page-footer"><div align="center"><div class="gen"><strong><a href="http://www.forumactif.com/" target="_blank">Forum gratuit</a></strong> | <span class="gensmall"></span> <a href="http://www.forumactif.com/fr/phpbb/" target="_blank">phpBB</a> | <a name="bottom" href="http://forum.forumactif.com/" target="_blank">Forum gratuit d'entraide</a> | <a name="bottom" href="/contact" rel="nofollow">Contact</a> | <a href="/abuse?page=%2Fh2-organisation-par-onglets&report=1" rel="nofollow">Signaler un abus</a> | <strong><a href="http://www.forumactif.com/fr/creer-un-forum/" target="_blank">Créer un forum</a></strong></div></div></div></td></tr></table><script type="text/javascript">//<![CDATA[
fa_endpage();//]]></script></body></html>

Retire-le pour commencer et ne garde que le JS Wink

Ou bien, alternative, place le JS (avec ton HTML) directement à la fin de ta page HTML (c'est moins propre, mais si ça t'aide à mieux comprendre, ça passe).

J'ai pas trop compris, car je mettais déjà le javascript à la fin.

Voici le code de la page HTML où les onglets devront être:

Code:: <center>
<div style="width:500px;height:650px;-webkit-border-radius: 99px;-moz-border-radius: 99px;border-radius: 99px;border:18px solid #A4BAB9;background:rgba(210,221,220,0.6);-webkit-box-shadow: #B3B3B3 5px 5px 5px;-moz-box-shadow: #B3B3B3 5px 5px 5px; box-shadow: #B3B3B3 5px 5px 5px;">
<center>
<font face="police" size="18">
<font color="grey"><br>The Journal Of<br>
<font color="black">SansOverdose
</font>
</font>
</font>
<br />
<span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Nom de l'Onglet 1</span><br /><br />
<span id="o_2" class="mon_onglet" onmouseover="changeOnglet(this);">Nom de l'Onglet 2</span><br /><br />
<span id="o_3" class="mon_onglet" onmouseover="changeOnglet(this);">Nom de l'Onglet 3</span><br /><br />
<span id="o_4" class="mon_onglet" onmouseover="changeOnglet(this);">Nom de l'Onlget 4</span>
<br /><br />
<span id="o_5" class="mon_onglet" onmouserover="changeOnglet(this);">Nom de l'Onlget 5</span>
<br /><br />
<span id="o_6" class="mon_onglet" onmouseover="changeOnglet(this);">Nom de l'Onlget6</span>
</td>
<td><div class="clear"><div id="mes_contenus">
<div id="co_1" class="mon_contenu">Contenu de l'Onglet 1</div>
<div id="co_2" class="mon_contenu" style="display: none;">Contenu de l'Onglet</div>
<div id="co_3" class="mon_contenu" style="display: none;">Contenu de l'Onglet</div>
<div id="co_4" class="mon_contenu" style="display: none;">Contenu de l'Onglet</div>
<div id="co_5" class="mon_contenu" style="display: none;">Contenu de l'Onglet</div>
<div id="co_6" class="mon_contenu" style="display: none;">Contenu de l'Onglet</div>
</div></div></div></td></tr></table>
</center>
</div>
</center>

<style type="text/css">
.mon_onglet{
display: inline;
padding: 2px;
margin: 2px 5px 5px 5px;
color: #fff;
}

.mon_onglet:hover{
color: #333;}

.mon_onglet_selected{
display: inline;
padding: 2px;
margin: 2px;
color: #000;
}

.clear{
clear: both;}

.mon_contenu{
color: #000;
padding: 10px;
margin: 10 px;
line-height: normal;
font-size: 11px;}

#mes_contenus, #mes_onglets{
height: 100%;
width:100%;}
</style>

<script language="javascript" src="http://concours-oh-my-dollz.forumgratuit.org/h2-test"></script>|

Code de la page HTML ou fallait mettre le JS:

Code:: function changeOnglet(_this){
var getOnglets = document.getElementById('mes_onglets').getElementsByTagName('span');
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';
}
}
}
}

Effectivement, en fait tu n'a pas bien saisi la différence entre inclure le Javascript dans ta feuille HTML (ce que tu crois faire) et placer ton script sur une feuille externe que tu charge dans ton HTML (ce que tu fais).

C'est le même principe que pour le CSS en fait, tu as 2 options ici (en gros) :

Soit tu place ton JS dans ton HTML, et donc cela se traduit par ceci à la fin de ta page HTML (pas d'autre page) :

Code:

<script type="text/javascript">
// Ton script ici
</script>
Soit tu place le JS dans une autre page et tu le charge dans ton HTML comme tu l'as fait plus ou moins ainsi :

Code:

<script type="text/css" src="URL DE TON SCRIPT JS"></script>

Dans ce second cas en revanche, la page que tu charge n'est pas une page HTML. Si tu place des balises HTML dedans, forcément cela plante, or c'est le cas ici du rendu que j'ai pu constater

Le problème est, si je ne m'abuse, que tu essaye d'héberger ton JS dans une page qui est en HTML (les pages HTML de ForumActif... sont en HTML). Il faudrait que tu le place ailleurs, mais ForumActif compressant tous les scripts JS que tu place dans le Panneau d'Admin, ce ne sera pas forcément évident de comprendre (et l'autre solution serait donc d'héberger ton script ailleurs, sur Dropbox par exemple comme certains font).

Si ça te paraît trop complexe, je te suggère donc d'inclure ton JS dans ta page HTML (dans la mesure où elle me semble petite, on peut considérer que c'est acceptable ici) Smile