Hello tout le monde,

J'ai un petit souci sur une page ou j'ai inséré une navigation par onglets pour une galerie d'images
En fait tout fonctionne parfaitement, sauf que je souhaiterai répéter les boutons de navigation de mes 3 onglets aussi en dessous de mes contenus, et que je n'arrive pas à ce que le "active" s'applique à la fois sur les boutons au dessus ET en dessus du contenu SIMULTANEMENT (si on utilise les boutons d'en dessous du contenu, la classe "active" ne s'applique qu'a eux et les boutons situés au dessus sont tous "inactives"(c-à-d que le bouton de l'onglet sélectionné ne se met pas en "surbrillance").... et vice-versa...)


Voici le script :

<script type="text/javascript">
$(document).ready(function() {

	//Default Action
	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content
	
	//On Click Event
	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content
		var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active content
		return false;
	});

});
</script>

Voici comment sont les boutons de mes onglets :

<ul class="tabs container">
				<li><a href="#tab1">Page 1</a></li>
				<li><a href="#tab2">Page 2</a></li>
				<li><a href="#tab3">Page 3</a></li>
			</ul>

Et voici mon contenu divisé en 3 Tabs :

<div id="tab1" class="tab_content">
   <p>Contenu 1</p>
</div>
<div id="tab2" class="tab_content">
 <p>Contenu 2</p>
</div>
<div id="tab3" class="tab_content">
   <p>Contenu 3</p>
</div>

Et donc les boutons répétés de mes onglets en dessous du contenu :

<ul class="tabs container">
				<li><a href="#tab1">Page 1</a></li>
				<li><a href="#tab2">Page 2</a></li>
				<li><a href="#tab3">Page 3</a></li>
			</ul>

Je ne sais pas si je me suis bien exprimé , si nécessaire je peux vous envoyer le lien de la page concernée par MP pour mieux visualiser le problème...

Un grand merci d'avance à ceux qui pourront m'aider parce que là je suis un peu perdu.....

Tu pourrais peut-être remplacer la ligne 12 par :

$("ul.tabs a[href="+$(this).find('a').attr('href')+"]").addClass("active");

Hello,
Merci pour ta réponse, mais ca ne fonctionne toujours pas : les 2 boutons "Pages 1" sont toujours bien en 'surbrillance' au chargement de la page, mais après dès qu'on clique sur un onglet il n'y en a plus un seul (ni en haut ni en bas) qui se mettent en surbrillance...

Je joint une capture d'écran pour illustrer mon problème :

Sur la capture j'ai cliqué sur l'onglet de la page 3 en dessous, et le page 3 du dessus ne s'est pas mis en surbrillance...

Verci de votre aide ! ^_^

Ah j'ai oublié le parent.

$("ul.tabs a[href="+$(this).find('a').attr('href')+"]").parent().addClass("active");

Mieux comme ça ?

Oui, beaucoup mieux : CA MAAAARRRCCCHHHEEE !!! ^_^

Un énorme merci pour le coup de pouce !!!!!

@ bientôt pour une prochaine énigme... ^_^