So erstellen Sie einen HTML-Lesezeichenanker für eine JavaScript-Registerkarte

Question

Ich habe ein scheinbar einfaches Problem, zu dem ich heute keine Lösung finden konnte. Wie kann ich ein Lesezeichen erstellen (z. B. example.com/somepage #mybookmark), das Elemente unter einer JavaScript-Registerkarte automatisch öffnet, z. B. die für die Verwendung auf w3schools vorgeschlagenen Registerkarten?

Ich habe versucht, einige id s zu den <li> Elemente Zuordnung der Laschen bilden, zum Beispiel:

<li id="mybookmark"><a href="#" class="tablinks" onclick="openCity(event, 'London')">London</a></li> 

und sogar einen Ankernamen, zB:

<li><a name="mybookmark" href="#" class="tablinks" onclick="openCity(event, 'London')">London</a></li> 

aber das beste Ergebnis, das ich bekam so weit beim Versuch, example.com/somepage#mybookmark war nur die Registerkarte zu markieren, ohne den zugehörigen Inhalt zu öffnen (was ist, was ich eigentlich will).

Ich nehme an, dass die Antwort in etwas JavaScript-Code liegt, aber könnte jemand vorschlagen, wie es aussehen sollte?

Answer 1

versuchen, etwas wie folgt aus:

$(function() { 
    $(".tab-content").hide().first().show(); 
    $(".yourNav li:first").addClass("active"); 

    $(".yourNav a").on('click', function (e) { 
    e.preventDefault(); 
    $(this).closest('li').addClass("active").siblings().removeClass("active"); 
    $($(this).attr('href')).show().siblings('.tab-content').hide(); 
}); 

    var hash = $.trim(window.location.hash); 
    if (hash) $('.inner-nav a[href$="'+ hash + '"]').trigger('click'); 
}); 

Grundsätzlich würden Sie die .click() der Registerkarte basieren zwingt auf die URL bilden die # auf. Der obere Teil dieser Sie sagte, Sie haben bereits, d. H. Tabs öffnen gut und all das, es ist der zweite Teil, wo die var hash = erklärt wird. Lass es mich wissen und viel Glück.