wie kann ich programmgesteuert erstellen Anker für meine Seite Header?

Ich habe mehrere überschriften auf einer Seite, und ich muss zum Auffüllen ein Navigations-Feld auf jeder Seite, die links zu den entsprechenden Anker."

Jedoch keiner meiner Header verankert sind. Ich habe zu viele Seiten, um dies manuell tun. kann jemand kommen mit einem sauberen jquery-Lösung?

InformationsquelleAutor m r | 2011-02-28
  1. 13
    function addAnchors(){
    //loop through all your headers
    $.each($('h1'),function(index,value){
        //append the text of your header to a list item in a div, linking to an anchor we will create on the next line
        $('#box-anchors').append('<li><a href="#anchor-'+index+'">'+$(this).html()+'</a></li>');
        //add an a tag to the header with a sequential name
        $(this).html('<a name="anchor-'+index+'">'+$(this).html()+'</a>');
    });
}
    • Süß! Ich werde auf jeden Fall versuchen, diese.. vielen Dank für das teilen!
    • Kein problem, hat mir geholfen, mehr als einmal.
    • Statt der letzten Zeile in Ihrem code, den Sie verwendet haben könnten .wrapInner() (api.jquery.com/wrapInner), so dass Sie am Ende mit $(this).wrapInner('<a name="anchor' + index + '" />');
    • danke für den Tipp.
    • Wenn Sie möchten, tun Sie dies für eine jekyll-Seite, die Sie bereits Hinzugefügt id Header für Sie. Alles, was Sie brauchen, ist dieses Skript.
    InformationsquelleAutor Orbit
  2. 1

    Tatsächlich, Sie können den link zu jedem tag mit einer id. So liest sich die id ' s der h1 und oder Einstellung Sie es tun würde, und würde in sauberer html-Code (keine plötzlichen css-überraschungen in der Zukunft, wenn styling deine a-Tags).

    • unter der Annahme, dass die id-tags...
    • Gut, wenn nicht, können Sie einen hinzufügen. Scheint weniger ein hack, als ein Anker-element, um es. Also ich würde vorschlagen: prüfen ob id vorhanden ist, falls ja, fügen Sie diese id, um die #box-Anker, wenn nicht, erstellen Sie eigene id, append dies zu #box-Anker, und fügen Sie diese id, um die h1. So werden Sie nicht stören die Struktur der html-und sicher alle anderen js und css werden weiter daran arbeiten. (zum Beispiel: was ist, wenn das h1 ist das erste Kind des div, und einige Skript verwendet die Eigenschaft? oder was ist, wenn Sie eine css-Regel oder js-Selektor verwendet, der nächste, der Bruder des h1?)
    InformationsquelleAutor markijbema
Schreibe einen Kommentar