<!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>Faire un tableau avec onglet</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
<!--
jQuery().ready(function(){
$(".bloc_texte").hide();
$("#1").show();
$(".titre").mouseover(function(){
if($(this).next("div").is(":hidden")){
$(".titre").next("div:visible").hide();
$(this).next("div").show();
}
});
});
-->
</script>
<style type="text/css">
span{
float:left;
padding:12px;
}
.bloc_texte{
position:absolute;
left:12px;
top:60px;
width :618px;
height:1000px;
background-color:white;
border:1px solid white;
}
.titre{
font-size:14px;
background-color:#952400;
color:#f6bf48;
padding:4px;
}
.titre:hover{
cursor:pointer;
}
</style>
</head>
<body>
<span><h1 class="titre">Mon titre 1</h1><div class="bloc_texte" id="1">Mon texte du bloc 1</div></span>
<span><h1 class="titre">Mon titre 2</h1><div class="bloc_texte">Mon texte du bloc 2</div></span>
<span><h1 class="titre">Mon titre 3</h1><div class="bloc_texte">Mon texte du bloc 3</div></span>
<span><h1 class="titre">Mon titre 4</h1><div class="bloc_texte">Mon texte du bloc 4</div></span>
</body>
</html>
Accueil 
Sujet: tableau à onglet 
Lun 29 Oct - 19:55