Sommaire Jquey

Fermé

analoulou - 13 oct. 2016 à 11:31
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 - 13 oct. 2016 à 12:52

Bonjour,

Je souhaite faire un sommaire dans lequel la couleur du titre du sommaire change en fonction du contenu scrollé. (Pour faire plus simple, c'est dans ce style la : http://bl-spf:82/page-contenus-2col.html

Pour l'instant j'ai juste ce code HTML, avec le sommaire et le contenu, mais je ne vois pas comment faire en jquery, j'ai essayé plusieurs tutos sans succès... Pouvez vous m'aider ?

Code html :


<html>

	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
		<script type="text/javascript" src="sommaire.js"></script>
	</head>

	<body>
		<div id="left">
		 
		<h2 id="introduction">INTRO</h2>
		<p>AZERTY AZERTY</br> AZERTY AZERTY AZERTY</br> AZERTY AZERTY AZERTY</br> AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY </p>
		 
		<h2 id="contenu">CONTENU</h2>
		<p>AZERTY AZERTY</br> AZERTY AZERTY AZERTY</br> AZERTY AZERTY AZERTY</br> AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY </p>
		 
		<h3 id="concept">concept</h3>
		<p>AZERTY AZERTY</br> AZERTY AZERTY AZERTY</br> AZERTY AZERTY AZERTY</br> AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY </p>
		 
		<h3 id="application">application</h3>
		<p>AZERTY AZERTY</br> AZERTY AZERTY AZERTY</br> AZERTY AZERTY AZERTY</br> AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY </p>
		 
		<h3 id="demonstration">demonstration</h3>
		<p>AZERTY AZERTY</br> AZERTY AZERTY AZERTY</br> AZERTY AZERTY AZERTY</br> AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY </p>
		 
		<h2 id="conclusion">CONCLUSION</h2>
		<p>AZERTY AZERTY</br> AZERTY AZERTY AZERTY</br> AZERTY AZERTY AZERTY</br> AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY </p>
		 
		</div>
		<div id="right">
			<!-- Sommaire -->
					<ul id="sommaire">
						<!-- H2 -->
						<li class="toc2">
							<span class="sommaireTitreNumerote numero1">1</span>
							<a href="#introduction" rel="nofollow noopener noreferrer" target="_blank" class="toclink">Introduction</a>
						</li>
					  
						<!-- H2 -->
						<li class="toc2">
							<span class="sommaireTitreNumerote numero2">2</span>
							<a href="#contenu" rel="nofollow noopener noreferrer" target="_blank" class="toclink">Contenu</a>
						</li>
					  
						<!-- H3 -->
						<li class="toc3">
							<a href="#concept" rel="nofollow noopener noreferrer" target="_blank" class="toclink">Concept</a>
						</li>
					  
						<!-- H3 -->
						<li class="toc3">
							<a href="#application" rel="nofollow noopener noreferrer" target="_blank" class="toclink">Application</a>
						</li>
					  
						<!-- H3 -->
						<li class="toc3">
							<a href="#demonstration" rel="nofollow noopener noreferrer" target="_blank" class="toclink">Demonstration</a>
						</li>
					  
						<!-- H2 -->
						<li class="toc2">
							<span class="sommaireTitreNumerote numero4 current">3</span>
							<a href="#conclusion" rel="nofollow noopener noreferrer" target="_blank" class="toclink">Conclusion</a>
						</li>
					</ul>
		</div>
    </body>
</html>

Merci

A voir également:

Sommaire Jquey
Sommaire word - Guide
Sommaire rapport de stage - Guide
Titre 4 n'apparait pas dans sommaire word ✓ - Forum Word
Comment faire les pointillés d'un sommaire sur word - Guide
Sommaire à copier coller - Forum Word

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
13 oct. 2016 à 12:52

Bonjour,
Tu as quoi dans ton fichier sommaire.js ?

Discussions similaires

Est-il possible de créer un sommaire en markdown

Erreur ! Signet non défini

sommaire d'un fichier

Afficher le plan dans chaque diapositive

Intégrer une table des annexes et des matières sur word

Discussions similaires

Newsletters