Accueil
Créer un forumOnglet 1 par défaut
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Onglet 1 par défaut
par Ayael Dim 19 Fév 2012 - 21:57
Bonjour bonjour, j'ai suivit un tutoriel pour faire des onglets sauf que je les ai un peu trifouiller, j'aimerai que le premier onglet soit l'onglet "quoi" s'affiche par défaut (En gros qu'il soit afficher tout le temps sauf quand on passe la souris sur l'onglet "qui" et l'onglet "pourquoi". Mon soucis c'est qu'actuellement si on passe la souris sur l'un des deux onglets (qui ou pourquoi) il reste afficher sur le qui ou le pourquoi, alors que je voudrais qu'il repasse sur l'onglet "quoi". Je ne sais pas si je suis très clair^^"
- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Un système d'onglet en javascript</title>
<script type="text/javascript">
//<!--
function change_onglet(name)
{
document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).className = 'onglet_1 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">
.onglet
{
display:inline-block;
cursor:pointer;
}
.onglet_0
{
}
.onglet_1 /*onglet actif*/
{
}
.contenu_onglet
{
width:275px;
height:133px;
background-color:#dddddd;
border:1px solid black;
margin-top:0px;
padding:5px;
display:none;
}
ul
{
margin-top:0px;
margin-bottom:0px;
margin-left:-10px
}
h1
{
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<table><tr><td valign="top"><div class="systeme_onglets">
<div class="onglets">
<span class="onglet_0 onglet" id="onglet_qui" onmouseover="javascript:change_onglet('qui');"><img src="http://i46.servimg.com/u/f46/16/36/06/79/vainqu11.png"/></span>
<span class="onglet_0 onglet" id="onglet_quoi" onmouseover="javascript:change_onglet('quoi');"> </span></td><td valign="top">
<div class="contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_quoi">
<h1>Quoi?</h1>
Un simple système d'onglet utilisant les technologies:<br />
<ul>
<li>(X)html</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</div>
<div class="contenu_onglet" id="contenu_onglet_qui">
<h1>Qui?</h1>
C'est un script réalisé par Ybouane,<br />
Webmaster du site <a href="http://www.supportduweb.com/">http://www.supportduweb.com/</a>
</div>
<div class="contenu_onglet" id="contenu_onglet_pourquoi">
<h1>Pourquoi?</h1>
Pour simplifier la navigation et la diviser en parties
</div>
</div>
</div></td><td valign="top"><span class="onglet_0 onglet" id="onglet_pourquoi" onmouseover="javascript:change_onglet('pourquoi');"><img src="http://i46.servimg.com/u/f46/16/36/06/79/meille11.png"/></span>
</div>
<script type="text/javascript">
//<!--
var anc_onglet = 'quoi';
change_onglet(anc_onglet);
//-->
</script></td></tr></table>
</body>
</html>
Dernière édition par Ayael le Lun 20 Fév 2012 - 12:04, édité 1 fois
Ayael- *****
-
Messages : 650
Inscrit(e) le : 21/04/2011 -
Re: Onglet 1 par défaut
par Invité Lun 20 Fév 2012 - 5:13
Bonjours,
quelle est le lien de votre forum que je puisse mieux comprendre votre problème ?
quelle est le lien de votre forum que je puisse mieux comprendre votre problème ?
Invité- Invité
Re: Onglet 1 par défaut
par demeter1 Lun 20 Fév 2012 - 10:54
Bonjour Ayael, voici le code corrigé
Rien de bien méchant, il fallait juste réattribuer la class danc cette partie
pour
le span class attribue l'onglet par défaut qui apparait en premier.
- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Un système d'onglet en javascript</title>
<script type="text/javascript">
//<!--
function change_onglet(name)
{
document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).className = 'onglet_1 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">
.onglet
{
display:inline-block;
cursor:pointer;
}
.onglet_0
{
}
.onglet_1 /*onglet actif*/
{
}
.contenu_onglet
{
width:275px;
height:133px;
background-color:#dddddd;
border:1px solid black;
margin-top:0px;
padding:5px;
display:none;
}
ul
{
margin-top:0px;
margin-bottom:0px;
margin-left:-10px
}
h1
{
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<table><tr><td valign="top"><div class="systeme_onglets">
<div class="onglets">
<span class="onglet_0 onglet" id="onglet_qui" onmouseover="javascript:change_onglet('qui');"><img src="http://i46.servimg.com/u/f46/16/36/06/79/vainqu11.png"/></span>
<span class="onglet_1 onglet" id="onglet_quoi" onmouseover="javascript:change_onglet('quoi');"> </span></td><td valign="top">
<div class="contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_quoi">
<h1>Quoi?</h1>
Un simple système d'onglet utilisant les technologies:<br />
<ul>
<li>(X)html</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</div>
<div class="contenu_onglet" id="contenu_onglet_qui">
<h1>Qui?</h1>
C'est un script réalisé par Ybouane,<br />
Webmaster du site <a href="http://www.supportduweb.com/">http://www.supportduweb.com/</a>
</div>
<div class="contenu_onglet" id="contenu_onglet_pourquoi">
<h1>Pourquoi?</h1>
Pour simplifier la navigation et la diviser en parties
</div>
</div>
</div></td><td valign="top"><span class="onglet_0 onglet" id="onglet_pourquoi" onmouseover="javascript:change_onglet('pourquoi');"><img src="http://i46.servimg.com/u/f46/16/36/06/79/meille11.png"/></span>
</div>
<script type="text/javascript">
//<!--
var anc_onglet = 'quoi';
change_onglet(anc_onglet);
//-->
</script></td></tr></table>
</body>
</html>
Rien de bien méchant, il fallait juste réattribuer la class danc cette partie
- Code:
<span class="onglet_0 onglet" id="onglet_quoi" onmouseover="javascript:change_onglet('quoi');"> </span></td><td valign="top">
pour
- Code:
<span class="onglet_1 onglet" id="onglet_quoi" onmouseover="javascript:change_onglet('quoi');"> </span></td><td valign="top">
le span class attribue l'onglet par défaut qui apparait en premier.
demeter1- Membre actif
-
Messages : 8993
Inscrit(e) le : 23/01/2009 -
Re: Onglet 1 par défaut
par Invité Lun 20 Fév 2012 - 10:57
Ha okay... Je voulais le lien car je ne comprenais pas ce que vous vouliez.. Mais bon heureux pour vous que votre problème sois réglé (j'Imagine) avec cela 
!
!
Invité- Invité
Re: Onglet 1 par défaut
par Ayael Lun 20 Fév 2012 - 12:03
- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Un système d'onglet en javascript</title>
<script type="text/javascript">
//<!--
function change_onglet(name)
{
document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).className = 'onglet_1 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">
.onglet
{
display:inline-block;
cursor:pointer;
}
.onglet_0
{
}
.onglet_1 /*onglet actif*/
{
}
.contenu_onglet
{
width:275px;
height:133px;
background-color:#dddddd;
border:1px solid black;
margin-top:0px;
padding:5px;
display:none;
}
ul
{
margin-top:0px;
margin-bottom:0px;
margin-left:-10px
}
h1
{
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<table><tr><td valign="top"><div class="systeme_onglets">
<div class="onglets">
<span class="onglet_0 onglet" id="onglet_qui" onmouseout="javascript:change_onglet('quoi');" onmouseover="javascript:change_onglet('qui');"><img src="http://i46.servimg.com/u/f46/16/36/06/79/vainqu11.png"/></span>
<span class="onglet_0 onglet" id="onglet_quoi" onmouseover="javascript:change_onglet('quoi');"> </span></td><td valign="top">
<div class="contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_quoi">
<h1>Quoi?</h1>
Un simple système d'onglet utilisant les technologies:<br />
<ul>
<li>(X)html</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</div>
<div class="contenu_onglet" id="contenu_onglet_qui">
<h1>Qui?</h1>
C'est un script réalisé par Ybouane,<br />
Webmaster du site <a href="http://www.supportduweb.com/">http://www.supportduweb.com/</a>
</div>
<div class="contenu_onglet" id="contenu_onglet_pourquoi">
<h1>Pourquoi?</h1>
Pour simplifier la navigation et la diviser en parties
</div>
</div>
</div></td><td valign="top"><span class="onglet_0 onglet" id="onglet_pourquoi" onmouseout="javascript:change_onglet('quoi');" onmouseover="javascript:change_onglet('pourquoi');"><img src="http://i46.servimg.com/u/f46/16/36/06/79/meille11.png"/></span>
</div>
<script type="text/javascript">
//<!--
var anc_onglet = 'quoi';
change_onglet(anc_onglet);
//-->
</script></td></tr></table>
</body>
</html>
Ce code là marche ^^ Merci de m'avoir montrer la voix!
Ayael- *****
-
Messages : 650
Inscrit(e) le : 21/04/2011 -
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum