Deaktivieren Sie den Bildlauf zum Inhalt, wenn Sie Foundation Tabs verwenden

Question

Ich benutze Foundation 5.5.3, und ich habe ein ernstes Problem mit den Inhalts-Tabs. Ich habe alles versucht, was mir einfällt, aber wenn ein Benutzer auf einen Tab klickt, scrollt er die Seite aus dem einen oder anderen Grund zum Inhalt. Ich verwende kein Deep-Linking, da ich verstehe, dass es ein Problem mit Deep-Linking/Scrollen zum Inhalt gibt.

Hier ist ein Beispiel für den HTML-Code:

<ul class="tabs" data-tab data-options="scroll_to_content: false"> 
    <li class="tab-title active"><a href="#tab1">Tab 1</a></li> 
    <li class="tab-title"><a href="#tab2">Tab 2</a></li> 
</ul> 
<div class="tabs-content"> 
    <div id="tab1" class="content active"> 
     <p>Tab 1 content</p> 
    </div> 
    <div id="tab2" class="content"> 
     <p>Tab 2 content</p> 
    </div> 
</div> 

Doch es rollt noch auf den Inhalt, wenn die Registerkarte geklickt wird. Ich bin ratlos, jede Hilfe wäre sehr willkommen.

Answer 1

Stellen Sie eine Lösung mit Hilfe von this answer zusammen.

Das Problem scheint von der Art und Weise zu stammen, wie MixPanel Tracking-Links behandelt. Es fängt die Klickaktion ab, führt einige Tracking-Aufgaben aus und leitet den Browser manuell dorthin, wo er hingelangen soll. Dies ist normalerweise in Ordnung, aber Foundation versucht, die Standardaktion zu deaktivieren, wenn auf eine Inhaltsregisterkarte geklickt wird. MixPanel kommt dann dazu und ignoriert das, sendet den Browser trotzdem an den Link, was das Scrollen verursacht.

Die Deaktivierung des Link-Trackings löst das Problem, aber das bedeutet auch, dass wir viel weniger nützliche Daten sammeln. Also bin ich herumgelaufen und habe versucht, eine Möglichkeit zu finden, Link-Tracking bei In-Page-Links zu deaktivieren. Hier kam die obige Antwort zum Tragen, da es sich um eine nette kleine Funktion handelt, mit der Sie mithilfe eines jQuery-Selektors bestimmen können, welche Links verfolgt werden sollen.

Anstelle der Standard-Link-Tracking-Einrichtung verwendet, die I bereitgestellt delegate_links Verfahren, wie zum Beispiel:

mixpanel.delegate_links(document.body, 'a:not([href^=#])', 'Clicked Link'); 

dass jeder Link ignoriert mit # starten, so deaktiviert er auf dem in Seiten-Links-Tracking. Normale Links werden so verfolgt, wie sie waren, aber die tabspezifischen Links lösen nicht länger MixPanel aus, und der Browser scrollt nicht mehr zum Inhalt beim Klicken.