Pour une raison quelconque, la Fadein de JQuery fait que ma page saute au sommet. Chaque DIV DIV DIV FADER IN permet à la barre de défilement une taille différente, donc je pense que cela pourrait être pourquoi "retour faux" ne fonctionne pas. Voici le code:
jQuery(document).ready(function($) {
//When page loads...
$(".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();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn('slow', function() {
$(this).show(); });
return false
});
});
5 Réponses :
Une autre pointe utile, plus quand il y a un
La question n'est rien avec des liens, bien que je comprenne que c'est la première pensée, c'est la transition elle-même.
Pour une fraction de seconde (une image, 13ms pour être exact, entre la peau et la première image du FADE IN) Il y a Pour éviter cela, vous devez empêcher le document d'obtenir des plus petites, heureusement pour votre page particulière qui est assez facile. Il suffit de changer ceci: p> à ceci: p> ou donnez-le externe CSS: p> .tabs_container { height: 516px; }
Merci de comprendre ce que vous voulez dire, sauf que je ne peux pas définir la hauteur de la div, car dans la page Options d'administrateur thématiques, l'utilisateur peut définir le nombre d'entrées affichées. Pour le moment, il est réglé pour corriger mais l'utilisateur pourrait la définir plus ou moins, modifier la hauteur ..
@Matthew - Vous pouvez le définir à ce qu'il est sur chaque charge, comme ceci: jQuery (". Tab_container"). Hauteur (fonction (i, h) {retour h;});
Merci, ce genre de fonctionne est cependant un moyen de l'obtenir pour obtenir la hauteur de chaque .Tab_Content? Au moment où vous cliquez sur un onglet différent avec moins de 5 messages, la hauteur ne change pas, il existe donc une charge d'espace vide. Merci encore cependant.
En outre, le texte se passe des couleurs drôles lors de la décoloration de Firefox .. toutes les idées?
@Matthew - Vous devez décider de la façon dont vous voulez qu'il se comporte ici ... Si vous n'allez pas avec une hauteur cohérente, la page saute toujours lorsque vous changez d'onglets (même problème de changement de hauteur de la taille), qu'est-ce que vous Vous voulez arriver?
Merci. Votre réponse répondit exactement à un problème que je rencontrais.
au lieu de retourner faux, do e.preventdefault () (pourquoi peut-on trouver ici: http://css-tricks.com/return-false-and-prevent-default/ ): Mais le problème n'a rien à voir avec le retourne faux, car le lien n'est pas suivi. Le problème est que vous masquez le contenu de l'onglet actuel, puis s'estomper dans le nouveau. Cela se traduit par une hauteur variée de votre corps, de sorte que la barre de défilement devienne plus courte, car l'ancien contenu est caché, vous faites que vous allez aller au sommet. Vous pouvez essayer d'obtenir la hauteur actuelle de la DIV, la hauteur du contenu qui sera chargé et modifier la hauteur de la div.
Et comment pourrais-je faire ça? : P Je ne suis qu'un débutant quand il s'agit de JQuery.
Vous ne pouvez pas utiliser Fadeto au lieu de Fadein . Par exemple:
Je pense qu'à utiliser Fadeto est une solution beaucoup plus propre que d'attribuer une hauteur via CSS . De cette façon, vous n'avez pas à vous soucier de la hauteur du contenu que vous échangez ou de sortir.
Un exemple avec une disparition de certains contenus et une disparition des données passées dans la fonction (par exemple, à la suite d'une Ajax Call): p>
Notez que vous devez utiliser Fadeto pour revenir au contenu (par opposition à juste Fadein) afin de renvoyer l'opacité à quelque chose de visible. P>
function swapData(data)
{
sel = '#tab_container';
$(sel).fadeTo(50, 0.10, function() { $(sel).html(data).fadeTo(300, 1) } );
}