Welche Pseudoklasse benutze für meinen Link
bearbeitet von
@@ liebewinter
> function setAriaCurrentPage(c,i,f){
Wie schon angesprochen wurde: das ist schlechter Stil. Lokale Variablen sollten lokal deklariert werden. Die Funktion sollte keine Parameter erwarten.
Oder doch einen: den URL der aktuellen Seite: `function setAriaCurrentPage(currentURL)`{:.language-js}.
> f=http://localhost/Beispiel-1.php;
Das auf der rechten Seite soll ein String sein, muss also in Anführungszeichen[^Anführungszeichen] stehen.
[^Anführungszeichen]: das, was in Programmiersprachen so „Anführungszeichen“ genannt wird: `'` bzw. `"`
Und verwende sprechende Valiablenbezeichner. Bspw.
~~~JavaScript
const currentURL = 'http://localhost/Beispiel-1.php';
~~~
(Wenn der Code auch in Uralt-Browsern laufen soll: `var`{:.language-js} statt `const`{:.language-js}.)
> c=document.querySelectorAll("a[href]");
Das ist völlig unnötig. Mit `document.links` steht bereits eine NodeList mit allen Links (incl. möglicher `area`-Elemente) zur Verfügung.
> if(c[i].getAttribute("href") == f){
Nicht die beste Idee. `getAttribute("href")`{:.language-js} liefert genau die Form, die im `href`-Attribut angegeben wurde. Besser verwendet man die `href`{:.language-js}-Eigenschaft, die den vollständigen URL liefert – egal ob der Link relativ oder absolut angegeben wurde. Wenn wir aktuell auf https://example.net sind:
| HTML | `.getAttribute("href")`{:.language-js} | `.href`{:.language-js}
|---|
| `<a href="foo">`{:.language-html} | "foo" | "https://example.net/foo"
| `<a href="/foo">`{:.language-html} | "/foo" | "https://example.net/foo"
| `<a href="//example.net/foo">`{:.language-html} | "//example.net/foo" | "https://example.net/foo"
| `<a href="https://example.net/foo">`{:.language-html} | "https://example.net/foo" | "https://example.net/foo"
Die Funktion könnte also so aussehen:
~~~JavaScript
function setAriaCurrentPage(currentURL)
{
for (let i = 0, i < document.links.length; i++)
{
if (document.links[i].href === currentURL)
{
document.links[i].setAttribute("aria-current", "page");
document.links[i].setAttribute("tabindex", "0");
document.links[i].removeAttribute("href");
}
}
}
~~~
(Wenn der Code auch in Uralt-Browsern laufen soll: `var`{:.language-js} statt `let`{:.language-js}.)
Aufruf:
~~~JavaScript
setAriaCurrentPage("http://localhost/Beispiel-1.php");
~~~
LLAP 🖖
--
*„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann
Welche Pseudoklasse benutze für meinen Link
bearbeitet von
@@ liebewinter
> function setAriaCurrentPage(c,i,f){
Wie schon angesprochen wurde: das ist schlechter Stil. Lokale Variablen sollten lokal deklariert werden. Die Funktion sollte keine Parameter erwarten.
Oder doch: den URL der aktuellen Seite: `function setAriaCurrentPage(currentURL)`{:.language-js}.
> f=http://localhost/Beispiel-1.php;
Das auf der rechten Seite soll ein String sein, muss also in Anführungszeichen[^Anführungszeichen] stehen.
[^Anführungszeichen]: das, was in Programmiersprachen so „Anführungszeichen“ genannt wird: `'` bzw. `"`
Und verwende sprechende Valiablenbezeichner. Bspw.
~~~JavaScript
const currentURL = 'http://localhost/Beispiel-1.php';
~~~
(Wenn der Code auch in Uralt-Browsern laufen soll: `var`{:.language-js} statt `const`{:.language-js}.)
> c=document.querySelectorAll("a[href]");
Das ist völlig unnötig. Mit `document.links` steht bereits eine NodeList mit allen Links (incl. möglicher `area`-Elemente) zur Verfügung.
> if(c[i].getAttribute("href") == f){
Nicht die beste Idee. `getAttribute("href")`{:.language-js} liefert genau die Form, die im `href`-Attribut angegeben wurde. Besser verwendet man die `href`{:.language-js}-Eigenschaft, die den vollständigen URL liefert – egal ob der Link relativ oder absolut angegeben wurde. Wenn wir aktuell auf https://example.net sind:
| HTML | `.getAttribute("href")`{:.language-js} | `.href`{:.language-js}
|---|
| `<a href="foo">`{:.language-html} | "foo" | "https://example.net/foo"
| `<a href="/foo">`{:.language-html} | "/foo" | "https://example.net/foo"
| `<a href="//example.net/foo">`{:.language-html} | "//example.net/foo" | "https://example.net/foo"
| `<a href="https://example.net/foo">`{:.language-html} | "https://example.net/foo" | "https://example.net/foo"
Die Funktion könnte also so aussehen:
~~~JavaScript
function setAriaCurrentPage(currentURL)
{
for (let i = 0, i < document.links.length; i++)
{
if (document.links[i].href === currentURL)
{
document.links[i].setAttribute("aria-current", "page");
document.links[i].setAttribute("tabindex", "0");
document.links[i].removeAttribute("href");
}
}
}
~~~
(Wenn der Code auch in Uralt-Browsern laufen soll: `var`{:.language-js} statt `let`{:.language-js}.)
Aufruf:
~~~JavaScript
setAriaCurrentPage("http://localhost/Beispiel-1.php");
~~~
LLAP 🖖
--
*„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann
Welche Pseudoklasse benutze für meinen Link
bearbeitet von
@@ liebewinter
> function setAriaCurrentPage(c,i,f){
Wie schon angesprochen wurde: das ist schlechter Stil. Lokale Variablen sollten lokal deklariert werden. Die Funktion sollte keine Parameter erwarten.
Oder doch: den URL der aktuellen Seite: `function setAriaCurrentPage(currentURL)`{:.language-js}.
> f=http://localhost/Beispiel-1.php;
Das auf der rechten Seite soll ein String sein, muss also in Anführungszeichen[^Anführungszeichen] stehen.
[^Anführungszeichen]: das, was in Programmiersprachen so „Anführungszeichen“ genannt wird: `'` bzw. `"`
Und verwende sprechende Valiablenbezeichner. Bspw.
~~~JavaScript
const currentURL = 'http://localhost/Beispiel-1.php';
~~~
(Wenn der Code auch in Uralt-Browsern laufen soll: `var`{:.language-js} statt `const`{:.language-js}.)
> c=document.querySelectorAll("a[href]");
Das ist völlig unnötig. Mit `document.links` steht bereits eine NodeList mit allen Links (incl. möglicher `area`-Elemente) zur Verfügung.
> if(c[i].getAttribute("href") == f){
Nicht die beste Idee. `getAttribute("href")`{:.language-js} liefert genau die Form, die im `href`-Attribut angegeben wurde. Besser verwendet man die `href`{:.language-js}-Eigenschaft, die den vollständigen URL liefert – egal ob der Link relativ oder absolut angegeben wurde. Wenn wir aktuell auf https://example.net sind:
| HTML | `.getAttribute("href")`{:.language-js} | `.href`{:.language-js}
|---|
| `<a href="foo">`{:.language-html} | "foo" | "https://example.net/foo"
| `<a href="/foo">`{:.language-html} | "/foo" | "https://example.net/foo"
| `<a href="//example.net/foo">`{:.language-html} | "//example.net/foo" | "https://example.net/foo"
| `<a href="https://example.net/foo">`{:.language-html} | "https://example.net/foo" | "https://example.net/foo"
Die Funktion könnte also so aussehen:
~~~JavaScript
function setAriaCurrentPage(currentURL)
{
for (let i = 0, i < document.links.length; i++)
{
if (document.links[i].href === currentURL)
{
document.links[i].setAttribute("aria-current", "page");
document.links[i].setAttribute("tabindex", "0");
document.links[i].removeAttribute("href");
}
}
}
~~~
Aufruf:
~~~JavaScript
setAriaCurrentPage("http://localhost/Beispiel-1.php");
~~~
LLAP 🖖
--
*„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann