JQuery UI Tabs Ursache "Jump" Bildschirm

Question

Ich verwende die neueste Version der jQuery UI tabs. Ich habe Registerkarten am unteren Rand der Seite positioniert.

Jedes Mal, wenn ich auf eine Registerkarte klicke, springt der Bildschirm nach oben.

Wie kann ich dies verhindern?

Bitte sehen Sie folgendes Beispiel:

http://5bosses.com/examples/tabs/sample_tabs.html

Answer 1

Wenn Sie etwas in dieser Richtung:

<a href="#" onclick="activateTab('tab1');">Tab 1</a>

Try return false; nach der Registerkarte Aktivierungsbefehl hinzufügen:

<a href="#" onclick="activateTab('tab1'); return false;">Tab 1</a>

Answer 2

Dank für deine Hilfe. Guter Vorschlag, aber ich habe es vorher ohne Glück versucht. Ich denke, JQuery UI kann meine Bemühungen überschreiben.

Hier ist der Code pro Reiter:

<li class=""><a href="#fragment-2"><span>Two</span></a></li> 

ich dies bereits versucht, ohne Erfolg:

<li class=""><a href="#fragment-2" onclick="return false;"><span>Two</span></a></li> 

Hier ist ein einfaches Beispiel (ohne return false): http://5bosses.com/examples/tabs/sample_tabs.html

Beliebig andere Vorschläge?

Answer 3

Meine Vermutung ist, dass Sie Ihre Tab-Übergänge animieren? Ich habe das gleiche Problem, bei dem der Seiten-Scroll mit jedem Klick wieder nach oben springt.

Ich fand diese in der jquery Quelle:

// Show a tab, animation prevents browser scrolling to fragment, 

Sicher genug, wenn ich dieses:

$('.tab_container > ul').tabs();  
$('.tab_container > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle', duration: 'fast' } }); 

meinen Code springt nach oben und ist ärgerlich (aber es gibt Animation). Wenn ich das zu diesem ändern:

gibt es keine Registerkartenanimation, aber das Wechseln zwischen Registerkarten ist glatt.

Ich habe einen Weg gefunden, es zurückrollen zu lassen, aber es ist keine richtige Lösung, da der Browser immer noch nach einem Klick auf einen Tab nach oben springt. Die Schriftrolle geschieht zwischen den Ereignissen tabsselect und tabsshow, so dass der folgende Code springt auf Ihre Registerkarte zurück:

var scroll_to_x = 0; 
var scroll_to_y = 0; 
$('.ui-tabs-nav').bind('tabsselect', function(event, ui) { 
    scroll_to_x = window.pageXOffset; 
    scroll_to_y = window.pageYOffset; 
}); 
$('.ui-tabs-nav').bind('tabsshow', function(event, ui) { 
    window.scroll(scroll_to_x, scroll_to_y); 
}); 

Ich werde nach mehr Fortschritte ich mache.

Answer 4

Vielen Dank für Ihre Hilfe! Bitte lassen Sie mich wissen, was Sie sonst noch finden.

Die obige Funktion funktioniert (Bildschirm bewegt sich nicht dauerhaft) ... aber der Bildschirm ist sehr wackelig beim Klicken.

Hier ist ein einfaches Beispiel zeigt, wie eine Registerkarten klicken Sie den Bildschirm führt nach oben hin (ohne den obigen Code) zu springen: http://5bosses.com/examples/tabs/sample_tabs.html

Hinweis, dass es keine Animation ist verwendet wird.

Answer 5

ich eine Lösung für diese gegeben wurde ...

Wie aus der oben springt Bildschirm zu stoppen, wenn Tab geklickt wird:

Wickeln Sie die div, dass die Laschen in einem div mit einer festen Höhe enthält.

Siehe Beispiel hier: http://5bosses.com/examples/tabs/sample_tabs.html

Answer 6

Es gibt eine viel einfachere Art und Weise, die ich aus den Kommentaren auf this page entdeckt, dass die href = „#“ einfach zu entfernen und es wird nicht mehr nach oben springen! Ich habe es verifiziert und es funktioniert für mich. Prost

Answer 7

Ich bevorzuge, eine href = "#" in meinen Verbindungen zu haben, die den Benutzer nirgendwo bringen, aber Sie können dies tun, solange Sie ein onclick = "Rückkehr false;" hinzufügen. Der Schlüssel, schätze ich, sendet den Benutzer nicht an "#", was abhängig vom Browser scheint, als der Anfang der aktuellen Seite standardmäßig zu sein.

Answer 8

Ich hatte das gleiche Problem, und meins rotierten für sich selbst, also, wenn Sie am Ende der Seite waren, würde das Browser-Fenster bis zum oberen Ende gescrollt werden. Eine feste Höhe für den Tab-Container zu haben hat bei mir funktioniert. Eine komische Sache ist immer noch, dass wenn Sie das Fenster oder die Registerkarte verlassen und zurückgehen, wird es immer noch scrollen. Nicht das Ende der Welt.

Answer 9

Wenn Sie Ihre Registerkarte Übergänge animieren (dh .tabs({ fx: { opacity: 'toggle' } });.), Dann ist hier, was passiert:

In den meisten Fällen wird das Springen durch den Browser nicht verursacht folgendem Link ‚#‘. Die Seite springt, da in der Mitte der Animation zwischen den beiden Registerkartenfenstern beide Registerkarten vollständig transparent und ausgeblendet sind (wie in der Anzeige: keine), so dass die effektive Höhe des gesamten Registerkartenabschnitts momentan Null wird.

Und wenn ein Tabulatorabschnitt mit Nullhöhe dazu führt, dass die Seite kürzer wird, dann scheint die Seite hochzuspringen, um sie zu kompensieren, wenn sie in Wirklichkeit einfach an den (momentan) kürzeren Inhalt angepasst wird. Macht Sinn?

Der beste Weg, dies zu beheben, ist eine feste Höhe für den Registerkartenbereich einzustellen. Wenn dies nicht erwünscht ist (weil Ihr Registerkarte Inhalt variiert in der Höhe), das dann statt:

jQuery('#tabs').tabs({ 
    fx: { opacity: 'toggle' }, 
    select: function(event, ui) { 
     jQuery(this).css('height', jQuery(this).height()); 
     jQuery(this).css('overflow', 'hidden'); 
    }, 
    show: function(event, ui) { 
     jQuery(this).css('height', 'auto'); 
     jQuery(this).css('overflow', 'visible'); 
    } 
}); 

Es wird die berechnete Höhe der Scheibe vor dem Registerkarte Übergang eingestellt. Sobald die neue Registerkarte angezeigt wird, wird die Höhe auf "auto" zurückgesetzt. Der Überlauf ist auf "Versteckt" eingestellt, um zu verhindern, dass Inhalte aus dem Bereich herausbrechen, wenn Sie von einem kurzen Tab zu einem höheren Tab wechseln.

Das hat bei mir funktioniert. Hoffe das hilft.

Answer 10

ersetzen Sie die href = "#" durch href = "javascript: void (0);" in 'a' Element

funktioniert 100%

Answer 11

Haben Sie tryed:

fx: {opacity:'toggle', duration:100} 

Answer 12

Mike Lösung das Prinzip stark gezeigt, aber es hat einen großen Nachteil - wenn die resultierende Seite kurz ist, wird der Bildschirm wird springe sowieso nach oben! Die einzige Lösung ist, den ScrollTop zu erinnern, und es wiederherzustellen, nachdem die Registerkarten umgeschaltet werden. Aber vor der Restaurierung, vergrößern die Seite (HTML-Tag) appropriatelly:

(edit - modifiziert für neu JQuery UI API + kleine Verbesserung für große Seiten)

$(...).tabs({ 
    beforeActivate: function(event, ui) { 
     $(this).data('scrollTop', $(window).scrollTop()); // save scrolltop 
    }, 
    activate: function(event, ui) { 
     if (!$(this).data('scrollTop')) { // there was no scrolltop before 
      jQuery('html').css('height', 'auto'); // reset back to auto... 
        // this may not work on page where originally 
        // the html tag was of a fixed height... 
      return; 
     } 
     //console.log('activate: scrolltop pred = ' + $(this).data('scrollTop') + ', nyni = ' + $(window).scrollTop()); 
     if ($(window).scrollTop() == $(this).data('scrollTop')) // the scrolltop was not moved 
      return;    // nothing to be done 
     // scrolltop moved - we need to fix it 
     var min_height = $(this).data('scrollTop') + $(window).height(); 
      // minimum height the document must have to have that scrollTop 
     if ($('html').outerHeight() < min_height) { // just a test to be sure 
          // but this test should be always true 
      /* be sure to use $('html').height() instead of $(document).height() 
       because the document height is always >= window height! 
       Not what you want. And to handle potential html padding, be sure 
       to use outerHeight instead! 
        Now enlarge the html tag (unfortunatelly cannot set 
       $(document).height()) - we want to set min_height 
       as html's outerHeight: 
      */ 
      $('html').height(min_height - 
       ($('html').outerHeight() - $('html').height())); 
     } 
     $(window).scrollTop($(this).data('scrollTop')); // finally, set it back 
    } 
}); 

Arbeiten mit der fx auch Wirkung.

Answer 13

Versuchen Sie, nur eine Min-Höhe mit CSS zu jedem der Tab-Inhaltsbereiche hinzuzufügen (nicht die Tabs selbst). Das hat es für mich behoben. :)

Answer 14

hatte ich das gleiche Problem mit jQuery UI-Menü - eine prevent() auf das Ereignis Click der Anker hält die Seite aus nach oben scrollen zurück:

$("ul.ui-menu li a").click(function(e) { 
     e.preventDefault(); 
}); 

Answer 15

Versuchen event.preventDefault(); verwenden. Auf dem Click-Ereignis, das die Registerkarten wechselt. Meine Funktion sieht so aus:

$(function() { 
     var $tabs = $('#measureTabs').tabs(); 
     $(".btn-contiue").click(function (event) { 
      event.preventDefault(); 
      $("#measureTabs").tabs("option", "active", $("#measureTabs").tabs ('option', 'active')+1 ); 
     }); 
    }); 

Answer 16

Ich hatte so ein Problem. Mein Code war:

$("#tabs").tabs({ 
    hide: { 
    effect: "fade", 
    duration: "500" 
    }, 
    show: { 
    effect: "fade", 
    duration: "500" 
    } 
}); 

Ich habe einfach entfernt show und es funktionierte wie ein Zauber!

$("#tabs").tabs({ 
     hide: { 
     effect: "fade", 
     duration: "500" 
     } 
}); 

Answer 17

ich in meinem Fall fand die Registerkarte href=#example1 die Seite der Position des id zu springen verursacht wurde. Hinzufügen einer festen Höhe auf den Registerkarten machte keinen Unterschied so einfach hinzugefügt I:

$('.nav-tabs li a').click(function(e) { e.preventDefault(); });