Bonjour, je vous donne les codes pour avoir un tableau d'accueil très simple.
Code du message d'accueil :
- Code:
-
<div id="mes_onglets">
<ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li>
<li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li>
<li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</li>
<li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</li>
<div class="clear"><div id="mes_contenus">
<div id="co_1" class="mon_contenu">Mon contenu 1</div>
<div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
<div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
<div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
</div></div></ul></div>
( Affichage -> Généralités )
Le css :
- Code:
-
.mon_onglet{
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #000;
background: #fff;
border: 1px solid #000;
cursor: pointer;
margin-bottom: -1px;
list-style: none;
}
.mon_onglet:hover{
background: #b8efa1;
}
.mon_onglet_selected{
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #000;
background: #fff;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 1px solid #fff;
cursor: pointer;
margin-bottom: -1px;
list-style: none;}
.clear{
clear: both;
}
.mon_contenu{
color: #000;
background: #fff;
border: 1px solid #000;
padding: 10px;
line-height: normal;
font-size: 11px;}
#mes_contenus, #mes_onglets{
width: 400px;
margin: auto;}
( Affichage -> Couleurs -> Feuille de style CSS )
Code javascript :
- Code:
-
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';
}
}
}
}
( Modules -> Gestions des codes Javascript )
Et voilà le résultat : http://www.top-discussions.com/h2-accueil1
PS : Tableau trouvé sur forum.forumactif.com !
Accueil 
Portail 
