11.6: Onglets complets

On a fini la partie "menu" des onglets. Il nous reste à faire le contenu.

Utilisez cette nouvelle version du fichier onglets.html :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>onglets</title>
		<link type="text/css" rel="stylesheet" href="onglets.css"/>
	</head>
	<body>
<!--------------------->
<div id="onglets">
	<ul id="onglets-menu">
		<li>Présentation</li>
		<li class="menu-actif">Règles</li>
		<li>Personnages</li>
		<li>Scores</li>
	</ul>

	<div id="onglets-contenu"> 
		<div>Martien est un nom générique qui désigne plusieurs types de créatures imaginaires censées vivre sur Mars. Selon la version la plus répandue, les martiens, également nommés « petits hommes verts », sont des êtres à l'apparence vaguement humanoïde et repoussante, minces, avec une grosse tête et des yeux globuleux, généralement animés de mauvaises intentions envers l'espèce humaine. Le nom de martien est souvent devenu, à tort, synonyme d'extraterrestre dans la culture populaire.</div>
		<div class="contenu-actif"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <p><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
		<div>Le chocolat [ ʃɔkɔla ], terme d'origine mésoaméricaine, est un aliment sucré produit à partir de la fève de cacao. Celle-ci est fermentée, torréfiée, broyée jusqu'à former une pâte de cacao liquide dont on extrait la matière grasse appelée beurre de cacao. Le chocolat est constitué du mélange, dans des proportions variables, de pâte de cacao, de beurre de cacao et de sucre ; on y ajoute éventuellement des épices, comme la vanille, ou des matières grasses végétales.</div>
		<div><ul><li>Moi: beaucoup</li><li>Eux: pas tant que ça</li></ul></div>
	</div>
</div>
<!--------------------->
		<script src="onglets.js"></script>
	</body>
</html>

(Dans les pages suivantes, le HTML est encore fixé. Vous ne devez pas le changer. Vous pouvez uniquement modifier le CSS.)