Jeder Link soll bei Tastaturbedienung die Formatierung behalten

[andynail]

Hallo zusammen,

auf meiner Seite - eine Linkliste - werden unterschiedliche Links dargestellt. Und diese werden auch korrrekt dargestellt, doch wenn ich die Tastatur, die Pfeiltasten, zur Bedienung nehme, ändert sich die Darstellung eines Links sobald dieser den Focus hat.Er nimmt automatisch das Format des Standardformats an. Und in den Link schreibe ich doch class=... Und die Formatierungen sehen beispielsweise so aus:

a { font-family: 'Times New Roman'; font-size:18px; color:#000; text-decoration: none; padding-left:20px; padding-right:20px; vertical-align:middle; display:block; white-space:nowrap; line-height:40px; outline: none; white-space:nowrap}
a:hover { background-image:url('Pictures/Linkauswahl.jpg'); background-repeat:repeat-x; background-color:#66fbfb }
a:active { color:#dd0000; }
a:focus { color:#dd0000; }

a.Datei { font-family: 'Times New Roman'; font-size:18px; color:#000; text-decoration: none; padding-left:5px; padding-right:20px; vertical-align:middle; display:block; white-space:nowrap; line-height:40px; outline: none; white-space:nowrap}
a.Datei:hover { background-image:url('Pictures/Linkauswahl.jpg'); background-repeat:repeat-x; background-color:#66fbfb }
a.Datei:active { color:#dd0000; }
a.Datei:focus { color:#dd0000; }

.

Ich hatte jetzt erst a.link als Standard eingefügt, was das Ganze aber noch schlimmer macht, denn dann zeigt sich ein Link unformatiert seitdem er besucht wurde.

Also wasn das denn bitte und wie bekomme ich das in den Griff?

Danke Gruß Andreas

 

[andynail]

OK sorry

ich habe übersehen das ich eine neue Klasse zuweise um den hover Effekt nachbilden zu können und verlasse den Link wieder per Zuweisung von nichts, sprich Stanard. Na bravo! Aber wie sonst soll ich dann den hover Effekt nachbilden? Wie soll ich per javascript rausbekommen mit was das formatiert ist und mit welchen Zusätzen gebe ich dann das classname an?

Danke Gruß Andreas

 

[Trüffelkrieger]

Ein Link zur Site wäre sehr hilfreich. Ich verstehe aber das Problem auch nicht ganz. Da du der focus-Pseudoklasse eine andere Farbe zugewiesen hast, als der Standard, ist es doch klar, dass sich diese ändert?

 

[andynail]

Hallo zusammen

OK ich mache das jetzt über javascript und css:

Ich erstelle einfach noch eine neue Klasse die den hover Effekt darstellen soll mit dem Namen wie die Elemente formatiert wurden dem Anhang Aktiv. Und die javascript Funktion lautet dann wie folgt:

                {
                var Index = $('a').index(ActiveLink);
                var css = document.getElementsByTagName("a")[Index].className
                document.getElementsByTagName("a")[Index].className = css.substr(0, css.length-5)
                if (Index == document.getElementsByTagName("a").length - 1) Index = -1
                }
                document.getElementsByTagName("a")[Index+1].className = document.getElementsByTagName("a")[Index+1].className + "Aktiv"
                ActiveLink = document.getElementsByTagName("a")[Index+1]
                document.getElementsByTagName("a")[Index+1].scrollIntoView(true)

a.Datei { font-family: 'Times New Roman'; font-size:18px; color:#000; text-decoration: none; padding-left:5px; padding-right:20px; vertical-align:middle; display:block; white-space:nowrap; line-height:40px; outline: none; white-space:nowrap }
a.Datei:hover { background-image:url('Pictures/Linkauswahl.jpg'); background-repeat:repeat-x; background-color:#66fbfb }
a.Datei:active { color:#dd0000; }
a.Datei:focus { color:#dd0000; }

a.DateiAktiv { font-family: 'Times New Roman'; font-size:18px; text-decoration: none; padding-left:5px; padding-right:20px; vertical-align:middle; display:block; white-space:nowrap; line-height:40px; outline: none; background-image:url('Pictures/Linkauswahl.jpg'); background-repeat:repeat-x; background-color:#66fbfb }

Und so funktionierts jetzt, doch ist dafür bei jedem Tastendruck ein wenig Rechenleistung gefragt. Aber anders wüsste ich es jetzt nicht.

Gruß Andreas

 

[Tronjer]

So wirklich verstehe ich das jetzt nicht. Du willst den Links eine CSS-Klasse zuweisen für den Fall, dass der User mit den Pfeiltasten darüber navigiert? Dann schreibe doch ein keydown-Event.

$('#mydiv a').on('keydown', function(e) {
    if ( e.which == 40) { // arrow down
        e.preventDefault();
        // tu was
        $(this).addClass('foo');
    }
})

 

[andynail]

Hallo Tronjer

ich hab das mit der Javascript Funktion onkeydown gemacht. Was ist der Unterschied zu dem was du zeigst? Wie kann ich damit diese Darstellung, denen mit dem Namen zb Sub zuweisen. Es ist ja so das der aktive Link der von einem Standardlink zum Sub kommt dann mit einem hover Effekt formatiert werden soll und der verlassene wieder ohne hover Effekt formatiert werden muss. Und dies ja immer gleich beim auftreffen des Focus. Ich hatte es auch versucht mit jquery da den Namen Datei einzufügen und wollte mir ein alert ausgeben lassen, was aber nicht funktionierte. Mit der von mir gezeigten Variante und onkeydown funktionierts. Aber trotzdem Danke. Aber für Ideen stehe ich offen.

Danke Gruß Andreas

 

[Tronjer]

Hallo andynail,

von einem keydown-Event hatte ich in deinem geposteten Code nicht gesehen, und deine Fragestellung ist etwas schwer zu verstehen:

Wie kann ich damit diese Darstellung, denen mit dem Namen zb Sub zuweisen. Es ist ja so das der aktive Link der von einem Standardlink zum Sub kommt dann mit einem hover Effekt formatiert werden soll und der verlassene wieder ohne hover Effekt formatiert werden muss. Und dies ja immer gleich beim auftreffen des Focus.

Mal angenommen, das wäre mein HTML:

<div id="box">
  <p>Das ist ein Text</p>
  <ul>
    <li><a class="menu">Menüpunkt 1</a><li>
    <li><a class="menu">Menüpunkt 2</a><li>
    <li><a class="menu">Menüpunkt 3</a><li>
    ....
  </ul>
</div>

Will ich nun abfragen, ob sich der User beim Click auf die Arrow-Down-Taste auf einem der Hyperlinks befindet, könnte ich so etwas machen:

ungetestet:

$('body').on('keydown', function(e) {
  this = e.target;
  if ( e.which == 40) { // wenn die Taste arrow-down gedrückt ist ...
    if ( this.hasClass('menu') ) { // und falls es sich bei dem Target um einen Menüpunkt handelt ...
      .... // dann tu etwas
    }
  }
});

Frage ist, was du nun - technisch formuliert - eigentlich machen willst. Meinen Code zugrunde legend könnte man dem aktuellen Hyperlink einen Hover-Effekt verpassen (dafür gibt es die Funktionen mouseover(), mouseout() und hover() ). Ebenso wäre es möglich, mittels Traversion den vorherigen oder nächsten Link bzw. das <p> oder den <div>-Container zu targeten. Außerdem ließen sich die CSS-Eigenschaften eines Elements abfragen und darauf basierend eine Aktion vornehmen.