Ich versuche, Ankerlinks zu erhalten, um Registerkarten auf einer bestimmten Seite zu öffnen.
Wenn ich mich auf der Seite befinde, auf der sich die Registerkarten befinden, und auf den Ankerlink klicke, wird korrekt zu der Registerkarte gescrollt und sie geöffnet – wenn ich mich jedoch auf einer anderen Seite als die Registerkarten befinde, wird der Ankerlink angezeigt geht nur zu dieser Seite, es öffnet nicht die Registerkarte.
URL: http://elkodowntown.wpengine.com/
Die Ankerlinks befinden sich unter der UNSERE MITGLIEDER Menü in der Navigation.
JS:
jQuery(function($) {
$('.menu-item-179 a').on('click', function(event){
tabScroll('.et_pb_tab_0');
return false;
});
$('.menu-item-180 a').on('click', function(event){
tabScroll('.et_pb_tab_1');
return false;
});
$('.menu-item-181 a').on('click', function(event){
tabScroll('.et_pb_tab_2');
return false;
});
$('.menu-item-182 a').on('click', function(event){
tabScroll('.et_pb_tab_3');
return false;
});
$('.menu-item-183 a').on('click', function(event){
tabScroll('.et_pb_tab_4');
return false;
});
function tabscroll(target) {
$("html, body").animate({ scrollTop: $('#member-tabs').offset().top }, 1000);
setTimeout($('#member-tabs' + target + ' a').click(), 2000 );
}
$(function hash() {
var hash = window.location.hash.replace('#', "");
if (hash == '#shop') { tabscroll('.et_pb_tab_1'); }
if (hash == '#service') { tabscroll('.et_pb_tab_0'); }
if (hash == '#eat-drink') { tabscroll('.et_pb_tab_2'); }
if (hash == '#arts-entertainment') { tabscroll('.et_pb_tab_3'); }
if (hash == '#stay') { tabscroll('.et_pb_tab_4'); }
});
});
HTML-Ankerlinks:
<ul class="sub-menu">
<li id="menu-item-179" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-179"><a href="http://stackoverflow.com/our-members#shop">Shop</a></li>
<li id="menu-item-180" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-180"><a href="http://stackoverflow.com/our-members#service">Service</a></li>
<li id="menu-item-181" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-181"><a href="http://stackoverflow.com/our-members#eat-drink">Eat & Drink</a></li>
<li id="menu-item-182" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-182"><a href="http://stackoverflow.com/our-members#arts-entertainment">Arts & Entertainment</a></li>
<li id="menu-item-183" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-183"><a href="http://stackoverflow.com/our-members#stay">Stay</a></li>
</ul>
Registerkarten-HTML:
<div id="member-tabs" class="et_pb_module et_pb_tabs et_pb_tabs_0 et_slide_transition_to_3 et_slide_transition_to_0">
<ul class="et_pb_tabs_controls clearfix">
<li class="et_pb_tab_0 et_pb_tab_active"><a href="#">Shop</a></li><li class="et_pb_tab_1"><a href="#">Service</a></li><li class="et_pb_tab_2"><a href="#">Eat & Drink</a></li><li class="et_pb_tab_3"><a href="#">Arts & Entertainment</a></li><li class="et_pb_tab_4"><a href="#">Stay</a></li>
</ul>
Die Ankerlinks (#shop,#service usw.) werden von aufgerufen <a name="#shop">
hier (direkt unter dem Tabs HTML):
<div class="et_pb_tab clearfix et_pb_active_content et_pb_tab_0 et-pb-active-slide" style="z-index: 1; display: block; opacity: 1;">
<a name="shop"></a><!--- tab content here --->
</div>
Ich bin mir sicher, dass es einen besseren Weg gibt, mein JS zu organisieren.
Jede Hilfe ist willkommen!
Sie haben mehrere
tabScroll
Funktionen, die eigentlich eine einzelne Funktion sein sollten, die ein Ziel als Parameter übergibt. Das sollte deine Frage aber nicht beeinflussen. Was Ihre Frage betrifft, so ist dies möglicherweise nicht die Antwort, sondern Ihre jQuerytabScroll
Funktionen klicken auf die Ziellinks Vor versuchen, zu ihnen zu scrollen? Würde das nicht sowieso vor einem Scrollen umleiten? Ich würde versuchen, diese beiden zu vertauschen, und dann den Klick in a setzensetTimeout
von der gleichen Länge wie die Scroll-Animation 🙂– Obsidianalter
25. Januar 2017 um 21:10 Uhr
@obsidian – Ich bin mir nicht sicher, ob ich Ihren Kommentar vollständig verstehe. Soll es so aussehen??
$("html, body").animate({ scrollTop: $('#member-tabs').offset().top }, 1000); setTimeout($('#member-tabs .et_pb_tab_1 a').click(); );
– Trischa
25. Januar 2017 um 21:16 Uhr
Ja, darauf bezog ich mich. Sie verwenden jQuery, um auf diese Ziellinks zu klicken, bevor Sie die Animation ausführen, die zu ihnen scrollt – ich bin überrascht, dass Sie das Scrollen überhaupt sehen 🙂 Natürlich dauert das Scrollen in Ihrem aktuellen Code Zeit (1 Sekunde). Sie müssen möglicherweise auch verzögern das Klickereignis um eine Sekunde, indem Sie es in a einschließen
setTimeout
. Das ist aber nur eine Theorie, nicht unbedingt die Lösung 😉– Obsidianalter
25. Januar 2017 um 21:19 Uhr
@obsidian, hier ist was ich habe:
$("html, body").animate({ scrollTop: $('#member-tabs').offset().top }, 1000); setTimeout($('#member-tabs .et_pb_tab_1 a').click(), 2000 );
– Trischa
25. Januar 2017 um 21:25 Uhr
Ich glaube, ich habe die Lösung – ertrage es mit mir 🙂
– Obsidianalter
25. Januar 2017 um 21:34 Uhr