[résolu] [jQuery tabs] la page remonte lors d'un clic sur un onglet

Bonjour,

J'ai intégrer des onglets sur une page web mais lorsqu'on clique sur l'un d'eux, la barre de scroll remonte.

Ce problème m'est déjà arrivé mais cette fois je n'arrive pas à le corriger, malgré plusieurs tentatives :

- ajout de "onclick='return false;' dans le lien
- href="javascript:void(0)"
- "<span>Onglet</span>" à la place de "<a href=''>Onglet</a>"
...


Voici le code :

<ul id="bas_menu" class="tabs">
		<li><a href="#web" class="web">Cr&eacute;ation web</a></li>
		<li><a href="#print" class="print">Graphisme &amp; publication</a></li>
		<li><a href="#com" class="com">Assistance &amp; formation</a></li>
	</ul>

$(document).ready(function() {

	//When page loads...
	$(".bas_contenu").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".bas_contenu: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
		$(".bas_contenu").hide(); //Hide all tab content

		var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active ID content
		return false;
	});

});

Merci d'avance.
Modifié par RomainDumay (02 Sep 2011 - 15:53)

Le problème c'est que gères le click sur les li et que tu as des liens à l’intérieur (ce qui est pour le moins étrange).
Modifié par jb_gfx (01 Sep 2011 - 12:35)

jb_gfx a écrit :
Le problème c'est que gères le click sur les li et que tu as des liens à l’intérieur (ce qui est pour le moins étrange).

J'ai aussi essayé sans mais le problème est le même :

<ul id="bas_menu" class="tabs">
		<li id="#web" onclick="return false;">Cr&eacute;ation web</li>
		<li id="#print" onclick="return false;">Graphisme &amp; publication</li>
		<li id="#com" onclick="return false;">Assistance &amp; formation</li>
	</ul>

$(document).ready(function() {

	//When page loads...
	$(".bas_contenu").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".bas_contenu: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
		$(".bas_contenu").hide(); //Hide all tab content

		var activeTab = $(this).attr("id"); //Find the href attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active ID content
		return false;
	});

});

Modifié par RomainDumay (01 Sep 2011 - 14:20)

Une url ?

La dernière fois que j'ai eu cela, cela était lié à la hauteur du contenu de ma page qui était modifié par les effets/display:none de jQuery.
Du coup, scroll intempestif...

Soluce : fixer une hauteur minimum.

tm™ a écrit :
Une url ?

La dernière fois que j'ai eu cela, cela était lié à la hauteur du contenu de ma page qui était modifié par les effets/display:none de jQuery.
Du coup, scroll intempestif...

Soluce : fixer une hauteur minimum.

C'est bien ça, merci !
J'ai défini une hauteur au conteneur et la barre de scroll ne remonte plus.

Bonjour à vous 2,

j'ai exactement le même problème et non solutionné par la hauteur fixée.
J'ai essayé min-height ou height sur le container mais à chaque click sur l'onglet la page remonte.
Avez vous une autre solution ?