Michael König: Aktiven Anker hervorheben?

Hallo zusammen!

Ich habe beim Stöbern durchs Netz eine Seite mit einem interessanten Feature entdeckt. Oben gibt's ein Inhaltsverzeichnis, unten folgt dann der komplette Text, natürlich sind die Überschriften mit Ankern versehen, so daß man mit einem Klick auf die Überschrift im Inhaltsverzeichnis direkt zum entsprechenden Absatz springen kann. Das ist ja noch alles einfach.

Ungewöhnlich ist, daß diese angesprungene Überschrift dann auch gleich markiert wird mit einem roten Strich am Rand.

Wie funktioniert das? Ist das CSS, wird das mit Javascript realisiert?

Hier mal der Link zur Seite (bereits mit markiertem Anker):
http://tortoisesvn.tigris.org/docs/TortoiseSVN_de/help-onepage.html#tsvn-ch-0-sect-2

Ich hab' mal versucht, mich durch den Quelltext und die CSS-Definitionen zu graben, leider ist das alles sehr verschachtelt...

Würde das Ganze gerne auch in eigenen Projekten verwenden, ich hab' nur leider keine Ahnung, wie das funktioniert. Bin für jede Hilfe dankbar!

Danke schonmal im Voraus, schönen Sommertag noch,

Michi

http://www.fotoseite.net

  1. Hallo,

    Ungewöhnlich ist, daß diese angesprungene Überschrift dann auch gleich markiert wird mit einem roten Strich am Rand.

    Wie funktioniert das? Ist das CSS, wird das mit Javascript realisiert?

    Das funktioniert mit CSS und der Pseudoklasse :target.

    a:target {
    border-right: 0.125em solid #f00;
    }

    Gruß
    Alexander Brock

    --
    SelfCode: ie:{ fl:{ br:> va:) ls:# fo:) rl:( n4:( ss:| de:> js:( ch:| sh:( mo:) zu:}
    http://emmanuel.dammerer.at/selfcode.html
    Deshalb können Pinguine nicht fliegen:
    Was nicht fliegt kann auch nicht abstürzen
    <img src="http://www.againsttcpa.com/images/AgainstTCPA-Log01Small.gif" border="0" alt="">
    http://againsttcpa.com
    1. Danke für die superschnelle Antwort!

      Funktioniert perfekt und tadellos!

      Das funktioniert mit CSS und der Pseudoklasse :target.

      a:target {
      border-right: 0.125em solid #f00;
      }

      1. Hallo Michael,

        Funktioniert perfekt und tadellos!

        Allerdings nur in moderneren Browsern wie aktuellen Mozilla-Versionen. In
        meinem Camino 0.7, der noch auf der Rendering Engine von Mozilla 1.0 basiert
        existiert das noch nicht.

        Der Grund liegt darin, daß die Pseudoklasse :target erst in CSS 3 definiert
        wurde. Der entsprechende Teil von CSS 3 ist zwar schon eine Candidate
        Recommondation, ist aber eben noch kein Standard. Teilweise wurde schon
        angefangen, dies zu implementieren. Trotzdem würde ich mich leider noch
        nicht darauf »verlassen«, daß das vorhanden ist, sondern es als zusätzliches
        Schmankerl nehmen. Was es ja auch ist.

        Tim

        1. Hallo.

          Allerdings nur in moderneren Browsern wie aktuellen Mozilla-Versionen. In
          meinem Camino 0.7, der noch auf der Rendering Engine von Mozilla 1.0 basiert
          existiert das noch nicht.

          Was allerdings heute schon funktioniert, ist "a" die für "a:target" gedachten Eigenschaften zu geben und diese bei "a:link", "a:visited" etc. wieder zu überschreiben.
          MfG, at

          1. Hi,

            Was allerdings heute schon funktioniert, ist "a" die für "a:target" gedachten Eigenschaften zu geben und diese bei "a:link", "a:visited" etc. wieder zu überschreiben.

            Das würde aber alle a-Elemente ohne href-Attribut formatieren, nicht nur den gerade angewählten Anker.
            Außerdem ist für das Anspringen (außer bei Uralt-Browsern wie Netscape 4.x) als Ziel ein ID-Attribut ausreichend, es braucht gar kein a-Element als Ziel.

            cu,
            Andreas

            --
            MudGuard? Siehe http://www.Mud-Guard.de/
            Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
            1. Hallo.

              Das würde aber alle a-Elemente ohne href-Attribut formatieren, nicht nur den gerade angewählten Anker.

              Du hast Recht.

              Außerdem ist für das Anspringen (außer bei Uralt-Browsern wie Netscape 4.x) als Ziel ein ID-Attribut ausreichend, es braucht gar kein a-Element als Ziel.

              In meinem CSS unterstütze ich diese Uralt-Browser kaum, aber die Funktion möchte ich auch dort gewährleisten -- zumal <a name="xyz"> ja noch immer nicht falsch ist.
              MfG, at