Welche Pseudoklasse benutze für meinen Link
liebewinter
- css
- meinung
2 Rolf B-1 ursus contionabundo0 Rolf B0 beatovich
Hallo , ich möchte euch frage welche Pseudoklasse wird ich benutze , wenn ich auf dem Link bin . Eine Beispiel…
ich bin auf Beispiel_1
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Beispiel-1</title>
<style>
/* links probe */
.link_wechsel ul {
list-style-type: none;
}
.link_wechsel a {
display: inline;
text-decoration: none;
border: 1px solid gray;
background-color: #FE2E64;
color: black;
padding: 8px;
opacity: 0.5;
font-family: Times New Roman;
}
.link_wechsel a:hover {
background-color: #9f9e9e;
}
.link_wechsel li {
margin-left: 390px;
}
</style>
</head>
<body>
<h3>Page 1</h3>
<div class="link_wechsel">
<ul>
<li>
Previos page
<a href="Beispiel-1.html"><b>1</b></a>
<a href="Beispiel-2.html"><b>2</b></a>
</li>
</ul>
</body>
</html>
und sie siehst so..
Die Beispiel_2 Code ist gleich... Meine frage .. wenn ich auf der Seite Beispiel_2 bin ,welche Pseudoklasse benutze soll um die Farbe die auf 2 ist , sich verendert... . ich habe versucht mit alle Pseudoklasse , aber habe keine gefunde für meinen Probleme , deshalb frage euch es…
Viele danke für eure Hilfe !
Hallo,
zuerst ein Hinweis auf richtiges HTML:
<div class="link_wechsel">
<ul>
<li>
Previos page
<a href="Beispiel-1.html"><b>1</b></a>
<a href="Beispiel-2.html"><b>2</b></a>
</li>
</ul>
font-weight:bold
.Zu deiner Frage:
Es gibt keine Pseudoklasse, die erkennt, dass ein Link auf die eigene Seite zeigt. Ich habe mal gegoogelt, die Antwort lautet immer: Mach das am Server (mit PHP) oder mit JavaScript im Browser.
Um das zu lösen, muss das Listenelement mit dem Link, der zur aktuellen Seite gehört, von Dir markiert werden. Hier bietet sich ein aria-Attribut an, nämlich aria-current="page"
. Dann weiß ein Anwender, der schlecht sieht und einen Screenreader benutzt, auch gleich Bescheid.
Im CSS fragst Du dann so ab:
nav li[aria-current=page] {
color: blue;
}
Die Frage ist: Wie kommt die Markierung an das <li>? Da gibt es 3 Wege:
<nav class="link_wechsel">
<ul>
<li><a href="Beispiel-1.html">Previous page</a></li>
<li><a href="Beispiel-1.html">1</a></li>
<li><a aria-current="page" href="Beispiel-2.html">2</a></li>
</ul>
</nav>
Rolf
danke für deinen antwort !
jetzt versuche was du mir gegeben hast ...
@@Rolf B
<nav class="link_wechsel"> <ul> <li><a href="Beispiel-1.html">Previous page</a></li> <li><a href="Beispiel-1.html">1</a></li> <li><a aria-current="page" href="Beispiel-2.html">2</a></li> </ul> </nav>
Sehr fein.
Zwei Ergänzungen:
Wenn es mehr als ein nav
-Element auf der Seite gibt, bietet sich eine Überschrift an, um diese voneinander unterschiedbar zu machen und Screenreader-Nutzern die Orientierung zu erleichtern. Diese kann visuell versteckt werden.
Die aktuelle Seite sollte nicht verlinkt sein. Entweder den Menüpunkt gar nicht verlinken (kein href
-Attribut, dann aber tabindex="0"
, damit er trotzdem angesagt wird) oder zum Hauptinhalt verlinken:
<nav class="link_wechsel">
<h2 class="visually-hidden">Page navigation</h2>
<ul>
<li><a href="Beispiel-1.html">Previous page</a></li>
<li><a href="Beispiel-1.html">1</a></li>
<li><a aria-current="page" tabindex="0">2</a></li>
</ul>
</nav>
<main id="main">
⋮
</main>
oder
<nav class="link_wechsel">
<h2 class="visually-hidden">Page navigation</h2>
<ul>
<li><a href="Beispiel-1.html">Previous page</a></li>
<li><a href="Beispiel-1.html">1</a></li>
<li><a aria-current="page" href="#main">2</a></li>
</ul>
</nav>
<main id="main">
⋮
</main>
LLAP 🖖
Viele danke für deinen bemühst !
als aria-current="page" ganz neue für mich ist , ich werde mehr lernen über sie..
so wie meine Beispiel-1.phphave…
<?php
header("Content-Type: text/html; Charset=utf-8");
mb_internal_encoding('UTF-8');
date_default_timezone_set('UTC');
error_reporting(E_ALL);
?>
<!doctype html>
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>taste-2</title>
<style>
/* links probe */
nav link_wechsel, ul {
list-style-type: none;
}
nav link_wechsel, a {
display: inline;
text-decoration: none;
border: 1px solid gray;
background-color: #FE2E64;
color: black;
padding: 8px;
opacity: 0.5;
font-family: Times New Roman;
}
nav a:hover {
background-color: #9f9e9e;
}
nav link_wechsel, li[aria-current=page]{
margin-left: 390px;
color: blue;
}
nav link_wechsel, ul {
margin-left: 340px;
}
</style>
</head>
<body>
<h3>Page 1</h3>
<nav class="link_wechsel">
<h2 class="visually-hidden">Page navigation</h2>
<ul>
<li><a href="Beispiel-1.php">1</a></li>
<li><a href="Beispiel-1.php">2</a></li>
<li><a aria-current="page" tabindex="0">2</a></li>
</ul>
</nav>
</body>
</html>
und das was ich bekomme..
was ich nicht verstehe warum bekomme mein Display , in Block , wenn ich habe display: inline ...
Hallo liebewinter,
nav link_wechsel {
und
<nav class="link_wechsel">
passt nicht zusammen.
Bis demnächst
Matthias
jetzt habe so geschrieben
#link_wechsel, a {…
und bekomme das gleiche...
jetzt habe so geschrieben
#link_wechsel, a {…
und bekomme das gleiche...
Du hast:
<nav class="link_wechsel">
Der Bezeichner für eine Klasse (class) in CSS ist der Punkt(dot). Also musst Du das im CSS mit
.link_wechsel { … }
adressieren.
Hallo liebewinter,
mit CSS hast Du noch nicht viel gemacht? CSS ist nicht ganz einfach, da kann ein Komma oder ein Punkt viel verändern. Schau mal hier in unser Wiki, da werden die Selektoren erklärt.
Rolf
ich habe mit # geschrieben weil ich miteinem Punkt bekomme gleiche..
aber warum nicht bekomme mit display: inline; ,eine inline , wie meine Erste Post ?
mit CSS hast Du noch nicht viel gemacht?
.link_wechsel ul {
list-style-type: none;
margin-left: 340px;
}
.link_wechsel a {
display: inline;
text-decoration: none;
border: 1px solid gray;
background-color: #FE2E64;
color: black;
padding: 8px;
opacity: 0.5;
font-family: Times New Roman;
}
.link_wechsel a:hover {
background-color: #9f9e9e;
}
.link_wechsel li[aria-current=page]{
margin-left: 390px;
color: blue;
}
ich weiss nicht mehr schreibe...☺️
Hallo liebewinter,
hast Du, wie ich geschrieben habe, die <li> hinzugefügt? Dann ist das die Erklärung: Du musst den li das display:inline geben, nicht mehr den <a>.
Besser als display:inline könnte übrigens ein display:inline-block sein. Damit funktioniert das Zuweisen von Größen (width, height) besser.
Rolf
Danke diesen war das fehler…
ich denke, wie ich eure antworten bekomme habe , haben euch mich False verstande..ich weiss , mein deutsch macht euch nicht einfacher..☺️
Was ich möchte , wenn beispiel bin ich auf der Beispiel-2 Seite , die Farbe die auf der Taste 2 , wird verendert , wie der Screenshot zeigt...
Dein Problem ist mit einer Pseudo-Klasse nicht lösbar.
Mit Javascript KANNST Du aber alle Links durchsuchen und, wenn dieser mit der aktuellen URL übereinstimmt, eine eigene Klasse setzen:
Tip: Die Funktionen addClassName()
, removeClassName()
, hasClassName()
und getOrCheckObjekt() würde ich in eine Skript-Datei auslagern. Die brauchst Du bestimmt nochmal.
<!DOCTYPE HTML>
<html lang="de">
<head>
<title>selflink</title>
<meta charset="utf-8">
<style>
li a {
padding: .2em .3em .2em .3em;
}
li a.SelfLink,
li a.SelfLink:visited {
background-color:#ccf;
}
</style>
</head>
<body>
<h1>selflink.htm</h1>
<ul>
<li><a href="foo">foo</a></li>
<li><a href="foo">foo</a></li>
<li><a href="selflink.htm">foo</a></li>
</ul>
<script>
function MarkSelfLinks() {
var thisUrl=document.location.href;
var allLinks = document.getElementsByTagName('a');
for ( let i=0; i < allLinks.length; i++) {
if ( 0 == thisUrl.indexOf( allLinks[i].href ) ) {
addClassName( allLinks[i], 'SelfLink');
}
}
}
function addClassName( o, cName ) {
o = getOrCheckObjekt( o );
if ( o && ( ! hasClassName( o, cName ) ) ) {
if ( o.className ) {
var s = o.className;
s = o.className + ' ' + cName;
s = s.replace( /^ +/ ).replace( / +$/ );
o.className = s;
} else {
o.className = cName;
}
return true;
}
return false;
}
function removeClassName( o, cName ) {
o = getOrCheckObjekt( o );
if (o) {
if( cName==o.className ) {
o.className='';
return true;
} else {
var c = o.className;
var a = c.split( / +/ );
var aNew = new Array();
var m = 0;
for ( let i = 0; i < a.length; i++ ) {
if ( cName != a[i] ) {
aNew[++m] = a[i];
}
}
o.className = aNew.join(' ');
return true
}
}
return false;
}
function hasClassName( o, cName ) {
o = getOrCheckObjekt( o );
if ( o ) {
var c = o.className;
var a = c.split( / +/ );
for ( let i = 0; i < a.length; i++ ) {
if ( cName == a[i] ) {
return true;
}
}
}
return false;
}
function getOrCheckObjekt( o ) {
if ( ! 'object' == typeof( o ) ) {
o = document.getElementById( o );
}
if ( 'object' == typeof( o ) ) {
return o;
}
console.log( 'kein Objekt übergeben, "' + o + '" ist unbekannt"' );
return false;
}
MarkSelfLinks();
</script>
</body>
</html>
Hallo ursus,
das Minus ist nicht von mir.
Aber warum benutzt Du nicht classList? Für das, was hier gebraucht wird, reicht das hin und funkt ab IE10. Mehr braucht man heute nicht mehr.
Deine Implementierung ist nur notwendig wenn man uralte Browser unterstützen will. Und da ist sie merkwürdig, seit wann ist ein + als Trennzeichen zwischen Klassennamen erlaubt?
Und statt einer handgemachten Suchschleife über Array wäre sicherlich ein Polyfill für Array.prototype.indexOf die bessere Idee.
Rolf
das Minus ist nicht von mir.
Was zu der Frage führt, was ICH jetzt lernen soll, wenn der Schlechtfinder mir nicht sagt, WAS GENAU an der offensichtlich funktionierenden Lösung "achsoschlecht" ist.
seit wann ist ein + als Trennzeichen zwischen Klassennamen erlaubt?
???
Womöglich meinst Du:
var a = c.split( / +/ );
Die Literatur verschweigt häufig das STRING.split() nicht nur Strings, sondern auch Pattern (reguläre Ausdrücke) versteht.
/ +/
meint also mindestens ein Leerzeichen.
Ich hab das so gemacht, weil ich bei Experimenten bzw. eigenen Fehlern festgestellt habe, dass man mit JS durchaus auch leere Klassennamen ("") hineinpoken kann.
Aber warum benutzt Du nicht classList?
Ist (für mich) neu. Manchmal hinken meine Kenntnisse über ganz aktuelle Neuheiten. Seh ich mir mal an.
Hallo ursus,
ja, und meine Regex-Kenntnisse verlassen mich manchmal. Dass da eine Regex möglich ist, wusste ich. Aber ich habe / +/
mit /[ +]/
verwechselt. Sorry. Wäre ggf. sogar /\s+/ angebracht?
Rolf
Wäre ggf. sogar /\s+/ angebracht?
Wenn Du befürchtest, dass da jemand unkontrolliert nicht nur Leerzeichen sondern auch Tabs oder Zeilenumbrüche in die Liste der Classnames reinpokt - dann: "ja". Sonst: "zu teuer".
Hallo ursus,
WAS GENAU ... "achsoschlecht" ist.
Also wenn ich kritisieren sollte - ein paar Sachen hätte ich ja schon, wenn ich anfange zu suchen...
D.h. es gibt schon ein paar Merkwürdigkeiten und Bugs. Sollte ich ggf. doch mein - setzen? 😉
Rolf
Ein Selflink ist bei Dir einer, der ein Präfix der Dokument-URL ist. http://example.org/foo.html?bar=1 ist also ein Selflink zum Dokument http://example.org/foo.html?bar=17
Ups.
Das ist jetzt mal "echt Kacke". Aber ich mach JETZT keinen Neuschrieb. Wenns denn pressiert kann das ja ein anderer tun.
getOrCheckObjekt löst ein Problem das sich hier nicht stellt
Ja. Die Funktionen hab ich (bis auf das let
, das noch var
war) aus meiner Sammlung und die haben getOrCheckObjekt() adressiert. Da hatte ich einst die gute Idee, entweder direkt ein Objekt oder eine ID zu übergeben zu können - und gleich mal zu testen, ob das Ding überhaupt da ist.
@@ursus contionabundo
Aber warum benutzt Du nicht classList?
Ist (für mich) neu. Manchmal hinken meine Kenntnisse über ganz aktuelle Neuheiten. Seh ich mir mal an.
Ganz aktuelle Neuheit?? ROTFL.
LLAP 🖖
Ganz aktuelle Neuheit?? ROTFL.
Tja. Aus meiner Sicht ist das ziemlich neu. Ich muss mich ja auch ständig um ziemlich viel Zeug kümmern und Wissen über folgenden Kram bereithalten: 4 Linux-Distributionen mit etlichen Servern (nicht nur Apache und MySQL/MariaDB) und Befehlen und Konfigurationsdateien; Sprachen wie PHP, Perl, Python, Bash, JS, VBA, ... . Gewisse Grundkenntnisse über Windows-Kram, HTML, CSS und so Frontend-Kram darf ich auch nicht vollständig vergessen. Heilige Schleppsagtmannicht! Ich lerne mit "Ü50" (also "kurz vorm Sterben") mehr als manch ein 16 Jähriger vor den Prüfungen (Damals hab ich die Bücher unters Kopfkissen gelegt - aber nur falls ich es für nötig hielt, was für die Prüfungen zu machen.)
Und: "He! Ich bin Ü50!" Was von wem als "aktuelle Neuheit" empfunden wird ist als Frage der chronologischen Perspektive durchaus auch altersabhängig.
Hallo ursus contionabundo,
Was zu der Frage führt, was ICH jetzt lernen soll, wenn der Schlechtfinder mir nicht sagt, WAS GENAU an der offensichtlich funktionierenden Lösung "achsoschlecht" ist.
Die falsche Technologie? @liebewinter arbeitet sich schon eine ganze Weile in PHP ein. Eine serverseitige Technologie scheint mir das geeignete Mittel zu sein, um solcherart Navigationen zu erstellen.
Bis demnächst
Matthias
Die falsche Technologie?
Ja eigentlich von Anfang an. Das serverseitig zu erledigen wäre besser. Und vor allem macht der Link auf die aktuelle Seite in der gezeigten Konstellation (Pager) keinen Sinn.
Allerdings ich hatte kurz vor dem Versand mal zu Rolf gelugt und vor dem Absenden Doppelungen gelöscht.
hallo
Dein Problem ist mit einer Pseudo-Klasse nicht lösbar.
Mit Javascript KANNST Du aber alle Links durchsuchen und, wenn dieser mit der aktuellen URL übereinstimmt, eine eigene Klasse setzen:
function setAriaCurrentPage(c,i,f){
f=location.href;
c=document.querySelectorAll("a[href]");
for(i=0; i<c.length; i++){
if(c[i].getAttribute("href") == f){
c[i].setAttribute("aria-current","page");
}
}
}
Viel weniger Code
Hallo beatovich,
function setAriaCurrentPage(c,i,f){ f=location.href; c=document.querySelectorAll("a[href]"); for(i=0; i<c.length; i++){ if(c[i].getAttribute("href") == f){ c[i].setAttribute("aria-current","page"); } } }
Besser:
function setAriaCurrentPage(c,i,f){
f=location.href;
c=document.querySelectorAll("a[href]");
for(i=0; i<c.length; i++){
if(c[i].getAttribute("href") == f){
c[i].setAttribute("aria-current","page");
c[i].setAttribute("tabindex","0");
c[i].removeAttribute("href");
}
}
}
Bis demnächst
Matthias
hallo
Besser:
Du meinst schlechter. Warum willst du einen Link vernichten? Warum denkst du dass ein Page reload grundsätzlich schlecht ist?
function setAriaCurrentPage(c,i,f){ f=location.href; c=document.querySelectorAll("a[href]"); for(i=0; i<c.length; i++){ if(c[i].getAttribute("href") == f){ c[i].setAttribute("aria-current","page"); c[i].setAttribute("tabindex","0"); c[i].removeAttribute("href"); } } }
Hallo beatovich,
Warum denkst du dass ein Page reload grundsätzlich schlecht ist?
Das denke ich nicht, ich würde allerdings meine Navigation so bauen.
Und ob das JavaScript so überhaupt funktioniert, muss auch noch getestet werden. Ich weiß nicht, ob das allgemeingültig ist, aber location.href
liefert https://example.com/page.html
. Relative Links können also durchaus scheitern.
Bis demnächst
Matthias
hallo
Hallo beatovich,
Warum denkst du dass ein Page reload grundsätzlich schlecht ist?
Das denke ich nicht, ich würde allerdings meine Navigation so bauen.
Und ob das JavaScript so überhaupt funktioniert, muss auch noch getestet werden. Ich weiß nicht, ob das allgemeingültig ist, aber
location.href
lieferthttps://example.com/page.html
. Relative Links können also durchaus scheitern.
my bad.
Ich hatte da original _.filename mit
_.filename = location.pathname.match( /[^/#](?:#.)?$/ )[0];
ich habe der code geschriben wie du hast , aber bekomme keine verenderung…
<script>
function setAriaCurrentPage(c,i,f){
f=http://localhost/Beispiel-1.php;
c=document.querySelectorAll("a[href]");
for(i=0; i<c.length; i++){
if(c[i].getAttribute("href") == f){
c[i].setAttribute("aria-current","page");
c[i].setAttribute("tabindex","0");
c[i].removeAttribute("href");
}
}
}
</script>
@@ 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)
.
f=http://localhost/Beispiel-1.php;
Das auf der rechten Seite soll ein String sein, muss also in Anführungszeichen[1] stehen.
Und verwende sprechende Valiablenbezeichner. Bspw.
const currentURL = 'http://localhost/Beispiel-1.php';
(Wenn der Code auch in Uralt-Browsern laufen soll: var
statt const
.)
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")
liefert genau die Form, die im href
-Attribut angegeben wurde. Besser verwendet man die href
-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")
| .href
|---|
| <a href="foo">
| "foo" | "https://example.net/foo"
| <a href="/foo">
| "/foo" | "https://example.net/foo"
| <a href="//example.net/foo">
| "//example.net/foo" | "https://example.net/foo"
| <a href="https://example.net/foo">
| "https://example.net/foo" | "https://example.net/foo"
Die Funktion könnte also so aussehen:
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
statt let
.)
Aufruf:
setAriaCurrentPage("http://localhost/Beispiel-1.php");
LLAP 🖖
das, was in Programmiersprachen so „Anführungszeichen“ genannt wird: '
bzw. "
↩︎
@@Gunnar Bittersmann
Die Funktion sollte keine Parameter erwarten.
Oder doch einen: den URL der aktuellen Seite:
function setAriaCurrentPage(currentURL)
.
Oder doch nicht. Der aktuelle URL steht ja mit window.location.href
zur Verfügung. (Allerdings eventuell mit query ?…
und fragment identifier #…
.)
function setAriaCurrentPage()
{
for (let i = 0, i < document.links.length; i++)
{
if (document.links[i].href === window.location.href)
{
document.links[i].setAttribute("aria-current", "page");
document.links[i].setAttribute("tabindex", "0");
document.links[i].removeAttribute("href");
}
}
}
Aufruf:
setAriaCurrentPage();
LLAP 🖖
hallo
Nicht die beste Idee.
getAttribute("href")
liefert genau die Form, die imhref
-Attribut angegeben wurde. Besser verwendet man diehref
-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")
|.href
|---| |<a href="foo">
| "foo" | "https://example.net/foo" |<a href="/foo">
| "/foo" | "https://example.net/foo" |<a href="//example.net/foo">
| "//example.net/foo" | "https://example.net/foo" |<a href="https://example.net/foo">
| "https://example.net/foo" | "https://example.net/foo"Die Funktion könnte also so aussehen:
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"); } } }
Und wie geht das mit Link-Fragmenten um?
@@beatovich
Und wie geht das mit Link-Fragmenten um?
| HTML | .getAttribute("href")
| .href
|---|
| <a href="foo#bar">
| "foo#bar" | "https://example.net/foo#bar"
| <a href="/foo#bar">
| "/foo#bar" | "https://example.net/foo#bar"
| <a href="//example.net/foo#bar">
| "//example.net/foo#bar" | "https://example.net/foo#bar"
| <a href="https://example.net/foo#bar">
| "https://example.net/foo#bar" | "https://example.net/foo#bar"
LLAP 🖖
hallo
Und wie geht das mit Link-Fragmenten um?
| HTML |
.getAttribute("href")
|.href
|---| |<a href="foo#bar">
| "foo#bar" | "https://example.net/foo#bar" |<a href="/foo#bar">
| "/foo#bar" | "https://example.net/foo#bar" |<a href="//example.net/foo#bar">
| "//example.net/foo#bar" | "https://example.net/foo#bar" |<a href="https://example.net/foo#bar">
| "https://example.net/foo#bar" | "https://example.net/foo#bar"
nice
Also wenn ich zwei Links habe
href="contact.html" und href="contact.html#impressum"
Dann wird nur einer der beiden Links auf aria-current="page" gesetzt.
Es gibt hier keine einfache Lösung aber die beste Lösung ist die, location.pathname entsprechend der eigenen Link-Politik aufzubereiten. Das muss aber zum eigenen Projekt passen.
Um mit CSS arbeite kann , habe deine Zeile,
document.links[i].setAttribute("aria-current", "page");
gewechsel mit ,
document.links[i].classList.add("css_link");
jetz , wie der ganze Code siehst...
<?php
header("Content-Type: text/html; Charset=utf-8");
mb_internal_encoding('UTF-8');
date_default_timezone_set('UTC');
error_reporting(E_ALL);
?>
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>beispiel-2</title>
</head>
<style>
.link_wechsel ul {
list-style-type: none;
margin-left: 340px;
}
.link_wechsel li {
display: inline;
}
.link_wechsel a {
display: inline;
text-decoration: none;
border: 1px solid gray;
background-color: #FE2E64;
color: black;
padding: 8px;
opacity: 0.5;
font-family: Times New Roman;
}
.link_wechsel a:hover {
background-color: #9f9e9e;
}
.link_wechsel a.css_link {
background-color:green;
}
</style>
<body>
<h3>Page 2</h3>
<nav class="link_wechsel">
<h2 class="visually-hidden">Page navigation</h2>
<ul>
<li><a href="Beispiel-1.php">1</a></li>
<li><a href="Beispiel-2.php">2</a></li>
</ul>
</nav>
<script>
var currentURL = window.location.href;
for (let i=0;i<document.links.length;i++)
{
if (document.links[i].href === currentURL)
{
document.links[i].classList.add("css_link");
document.links[i].setAttribute("tabindex", "0");
document.links[i].removeAttribute("href");
}
}
</script>
</body>
</html>
ein Screeshot wie Beispiel-2.php siehst…
@@ liebewinter
Um mit CSS arbeite kann , habe deine Zeile,
document.links[i].setAttribute("aria-current", "page");
gewechsel mit ,
document.links[i].classList.add("css_link");
Nein!
aria-current="page"
gibt Information an assistive Technologien (wie Screenreader) weiter, dass es sich um die aktuelle Seite handelt. class="css_link"
tut das nicht.
Und es ist nicht so, dass man zum Stylen mit CSS unbedingt Klassen bräuchte.
Das, was du mit dem Klassenselektor .css_link
(was aus CSS-Sicht auch nur eine verkürzte Schreibweise für den Attributselektor [class~="css_link"]
ist) machen kannst, kannst du genauso mit dem Attributselektor [aria-current="page"]
machen.
Verwende aria-current="page"
!
LLAP 🖖
Entschuldigung , ich habe weiter versuche und mit
document.links[i].setAttribute("aria-current", "page");
kann in CSS vearbeitet , habe geschrieben in CSS ,
.link_wechsel a[aria-current=page] {
background-color:green;
}
und bekomme…
aber bin ich nicht sicher ob alte Browser das Unterstürtz wird....
Hallo ,
a[aria-current=page] heißt "Attributselektor" und gehört zu CSS Version 2.1.
Der Internet Explorer 6 unterstützt das nicht. Den benutzen in Deutschland noch 0.03% aller Anwender (erstaunlich! so viele?!?!).
Wenn man davon ausgeht, dass alle Deutschen von 12-75 Jahren im Internet sind, sind das 64,4 Millionen Anwender. Davon 0.03% sind ungefähr 20000 Menschen.
Alle anderen verstehen den Attributselektor.
Ob die Zahlen bei caniuse.com stimmen, weiß man natürlich nicht.
Rolf
Danke für deinen antwort ! , jetzt versuche gleiche aber ohne Javascript , mit PHP..
ich habe so geschrieben;
<?php
function mein_link()
{
$hallo = link_wechsel;
foreach ( $hallo as $love)
{
if ($love == $hallo)
{
echo $love;
}
else {
echo $hallo;
}
}
}
?>
und hier ganze Code;
<?php
header("Content-Type: text/html; Charset=utf-8");
mb_internal_encoding('UTF-8');
date_default_timezone_set('UTC');
error_reporting(E_ALL);
?>
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>beispiel-2</title>
</head>
<style>
.link_wechsel ul {
list-style-type: none;
margin-left: 340px;
}
.link_wechsel li {
display: inline;
}
.link_wechsel a {
display: inline;
text-decoration: none;
border: 1px solid gray;
background-color: #FE2E64;
color: black;
padding: 8px;
opacity: 0.5;
font-family: Times New Roman;
}
.link_wechsel a:hover {
background-color: #9f9e9e;
}
.link_wechsel a.love {
background-color:green;
}
</style>
<body>
<h3>Page 2</h3>
<nav class="link_wechsel">
<h2 class="visually-hidden">Page navigation</h2>
<ul>
<li><a href="Beispiel-1.php">1</a></li>
<li><a href="Beispiel-2.php">2</a></li>
</ul>
</nav>
<?php
function mein_link()
{
$hallo = link_wechsel;
foreach ( $hallo as $love)
{
if ($love == $hallo)
{
echo $love;
}
else {
echo $hallo;
}
}
}
?>
</body>
</html>
aber ohne erfolgt ... ,die Links verendert nicht die farbe...
Hallo,
tja, wie erkläre ich das jetzt. Du programmierst hier zwei Geräte gleichzeitig, und man kann dabei schnell verwirrt sein.
Deinen Server. Da läuft das PHP Script, und es erzeugt eine HTML Seite für den Browser. In dieser HTML Seite kann HTML, CSS und JavaScript stehen.
Den Browser. Da kommt deine Seite an, und wenn die Seite JavaScript enthält, führt der Browser es aus.
Wenn Du auf das DOM zugreifen willst (also das Objektmodell, das der Browser aus deinem HTML erzeugt hat), musst Du das mit JavaScript tun. In PHP gibt es das nicht.
Ein Ding namens link_wechsel
gibt es in PHP ganz bestimmt nicht. Das ist der Name einer CSS Klasse, und für PHP ist das erstmal nur Text. Wenn PHP ein Wort sieht, dass es nicht kennt, macht es eine Zeichenkette daraus.
Die beiden Zeilen hier machen das gleiche:
$hallo = link_wechsel;
$hallo = "link_wechsel";
Jaaa, okaaay - nicht exakt das gleiche. PHP hat einen Befehl namens define
, mit dem könntest Du link_wechsel
eine andere Bedeutung geben. Aber das lassen wir hier mal weg. Solange kein define(link_wechsel, ...)
gemacht wurden, tun die beiden Zeilen das gleiche.
Hier im Thread sind zwei Lösungsvarianten diskutiert worden:
(1) PHP weiß, welche Seite es anzeigt, und erzeugt am Link entsprechende Attribute oder Klassen. Um das zu machen, müsstest Du an der Stelle, wo Du das <nav> Element ausgibst, Logik einbauen.
(2) Du machst es mit JavaScript und trägst das Attribut erst im Browser ein. Dann muss die Seite aber auch JavaScript enthalten.
Rolf
PHP weiß, welche Seite es anzeigt, und erzeugt am Link entsprechende Attribute oder Klassen. Um das zu machen, müsstest Du an der Stelle, wo Du das <nav> Element ausgibst, Logik einbauen.
so , wie ich habe es versucht..
<nav class="link_wechsel">
<h2 class="visually-hidden">Page navigation</h2>
<ul>
<li><a <?php $me=me; ?> href="Beispiel-1.php">1</a></li>
<li><a <?php $me=me; ?> href="Beispiel-2.php">2</a></li>
</ul>
</nav>
<?php
function mein_link()
{
$hallo = $me;
foreach ( $hallo as $love)
{
if ($love == $hallo)
{
echo $love;
}
else {
echo $hallo;
}
}
}
?>
Hallo ,
jetzt wird es aber ganz konfus.
Zunächst mal: Das ist PHP, nicht Visual BASIC. me
im Sinne von "dieses Objekt hier" gibt es nicht.
Ansonsten ist Dir immer noch nicht klar, was eigentlich abläuft.
PHP verarbeitet eine PHP Datei von oben nach unten. Alles, was innerhalb einer Funktion oder Klasse steht, wird erstmal nur gespeichert und erst dann ausgeführt, wenn die Funktion oder eine Methode der Klasse aufgerufen wird. Sowas hatten wir mit Dir schon öfter gemacht, ich dachte, das wäre so weit klar.
Alles, was NICHT in einer Funktion oder Klasse steht, wird sofort ausgeführt. Dein Script würde also zweimal hintereinander $me = me;
ausführen. Auch in Visual BASIC würde $me danach immer den zweiten me-Wert haben, und das willst Du ja nicht.
Deine $love - $hallo Funktion musst Du von irgendwo aufrufen, sonst wird sie nicht ausgeführt. Tust du das?
Aber auch wenn Du das tust - es wird nichts nützen. Das Programm darin kann nicht funktionieren.
$hallo = $me;
foreach ($hallo as $love)
{
if ($love == $hallo)
{
}
}
Deine Idee war doch, dass in $me ein Link-Element steht (WENN das denn funktionieren würde). Ein einzelnes Link-Element kann man aber nicht mit foreach verarbeiten. foreach braucht ein Array[1]
if ($hallo == $love) kann niemals wahr sein. Ein Array kann nicht das gleiche sein wie ein Element dieses Arrays.[2]
Ich möchte ja nicht alles für Dich schreiben. Deine Beispielseiten haben das <nav> Element bestimmt fest eingebaut. Das heißt: Du kannst in beispiel-1.php das aria-current="page" an das erste <a> schreiben und in beispiel-2.php schreibst Du das an das zweite <a>. Du brauchst keine Programmlogik.
Alles was ich jetzt noch schreibe ist für die Zukunft:
Aber das wird nicht so bleiben. Wenn man eine Website aus 10 Seiten hat, dann schreibt man die Navigation nur einmal und holt sie mit include oder require auf die Seiten. In der mit include geholten Datei brauchst Du dann Programmlogik, weil sie erkennen muss, auf welcher Seite sie eingesetzt wird.
Wenn man gemeinsame Teile einer Webseite nur einmal schreiben will, kann man das zum Beispiel so machen: Du hast eine Datei header.php, und Seiten wie auto.php, essen.php, haus.php oder kontakt.php. Alle diese Seiten sehen ähnlich aus:
<?php
require 'header.php';
?>
<main>
<h2>Tolle Autos</h2>
...
</main>
<?php
require 'footer.php';
?>
In header.php und footer.php steht alles, was auf den Seiten gemeinsam ist. Der Header zum Beispiel so:
<!DOCTYPE html>
<html>
<head>
(alles, was du im head brauchst)
</head>
<body>
<header>
(dein Seiten-Header)
</header>
<nav class="link_wechsel">
<h2 class="visually-hidden">Page navigation</h2>
<ul>
<li><a href="autos.php">Tolle Autos</a></li>
<li><a href="essen.php">Leckeres Essen</a></li>
<li><a href="haus.php">Schöne Häuser</a></li>
<li><a href="kontakt.php">Schreibe mir!</a></li>
</ul>
</nav>
Und footer.php so:
<footer>
Dein Footer-Inhalt
</footer>
</body>
</html>
Wie gesagt, das ist ein BEISPIEL, das musst Du für deine Anwendung anpassen.
Der <nav> Bereich ist hier das interessante. Das header.php muss wissen, von wo es geladen wurde, und damit entscheiden, welcher Link die aktuelle Seite ist. Er kann das auf unterschiedliche Art erfahren. Eine einfache Möglichkeit ist, dass die Seiten vor dem require eine Variable setzen:
<?php
$current_page = "autos";
require 'header.php';
?>
In header.php steht dann:
…
<nav class="link_wechsel">
<h2 class="visually-hidden">Page navigation</h2>
<ul>
<li><a <?php if ($current_page=="autos"): ?>aria-current="page" <?php endif ?> href="autos.php">Tolle Autos</a></li>
<li><a <?php if ($current_page=="essen"): ?>aria-current="page" <?php endif ?> href="essen.php">Leckeres Essen</a></li>
<li><a <?php if ($current_page=="haus"): ?>aria-current="page" <?php endif ?> href="haus.php">Schöne Häuser</a></li>
<li><a <?php if ($current_page=="kontakt"): ?>aria-current="page" <?php endif ?> href="kontakt.php">Schreibe mir!</a></li>
</ul>
</nav>
Das ist nicht schön, aber so bekommt genau eine Link das aria-current Attribut. Um das lesbarer zu machen, würde man ein PHP Array für die Links verwenden und eine Funktion aufrufen, die den Link erzeugt. Das geht jetzt aber zu weit.
Rolf
ich bedanke mich für deinen bemüht ! , ich möchte heute und Morge sie lese und lerne ! ,
ich habe ein schockokuchen gebäckt , schicken ein stückt dir mit Telepathie ...☺️
ich wünsche dir ein schöne Wochenende !
@@Rolf B
In header.php und footer.php steht alles, was auf den Seiten gemeinsam ist. Der Header zum Beispiel so:
<!DOCTYPE html> <html> <head> (alles, was du im head brauchst)
Hier wäre anzumerken, dass auch darin Logik nötig ist. Der title
soll ja nicht bei allen Seiten gleich sein.
</head> <body> <header> (dein Seiten-Header) </header> <nav class="link_wechsel"> <h2 class="visually-hidden">Page navigation</h2> <ul> <li><a href="autos.php">Tolle Autos</a></li> <li><a href="essen.php">Leckeres Essen</a></li> <li><a href="haus.php">Schöne Häuser</a></li> <li><a href="kontakt.php">Schreibe mir!</a></li> </ul> </nav>
Das gefällt mir gar nicht. Ich würde das so machen, dass ein Include einen abgeschlossenen Block erzeugt, d.h. ein HTML-Element mit dessen Inhalt, also mit dessen Start-Tag beginnt und dessen zugehörigem End-Tag endet.
Bspw:
<!DOCTYPE html>
<html>
<?php require 'head.php'; ?>
<body>
<?php require 'pageheader.php'; ?>
<?php require 'nav.php'; ?>
<main>
<h1>Tolle Autos</h1>
...
</main>
<?php require 'pagefooter.php'; ?>
</body>
</html>
Die Seitenüberschrift „Tolle Autos“ ist h1
, nicht h2
.
head.php:
<head>
...
</head>
pageheader.php:
<header>
...
</header>
usw.
LLAP 🖖
hallo , ich habe wie du sagst , aber bekomme keine aria-current Attribut…
so , ich habe drei dateien , beispiel-1.php , beispiel-2.php und beispiel-3.php
auf alle drei habe so geschrieben…
<?php
$current_page = "1";
include 'header-beispiel.php';
header("Content-Type: text/html; Charset=utf-8");
mb_internal_encoding('UTF-8');
date_default_timezone_set('UTC');
error_reporting(E_ALL);
?>
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>beispiel-1</title>
</head>
<style>
</style>
<body>
<h3>Page 1</h3>
</body>
</html<
bei ihnen nur verendert $current_page = "1"; , das ist die variable Nummer…
dann habe der header-beispiel.php , wo meine Code steht..
<?php
header("Content-Type: text/html; Charset=utf-8");
mb_internal_encoding('UTF-8');
date_default_timezone_set('UTC');
error_reporting(E_ALL);
?>
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>header-beispiel</title>
</head>
<style>
.link_wechsel ul {
list-style-type: none;
margin-left: 340px;
}
.link_wechsel li {
display: inline;
}
.link_wechsel a {
display: inline;
text-decoration: none;
border: 1px solid gray;
background-color: #FE2E64;
color: black;
padding: 8px;
opacity: 0.5;
font-family: Times New Roman;
}
.link_wechsel a:hover {
background-color: #9f9e9e;
}
.link_wechsel a.[aria-current=page] {
background-color:green;
}
</style>
<body>
<nav class="link_wechsel">
<h2 class="visually-hidden">Page navigation</h2>
<ul>
<li><a <?php if ($current_page=="1"): ?>aria-current="page" <?php endif ?> href="beispiel-1.php">1</a></li>
<li><a <?php if ($current_page=="2"): ?>aria-current="page" <?php endif ?> href="beispiel-2.php">2</a></li>
<li><a <?php if ($current_page=="3"): ?>aria-current="page" <?php endif ?> href="beispiel-3.php">3</a></li>
</ul>
</nav>
</body>
</html>
ich bekomme alles gut als die Farbe verenderung...
@@Rolf B
Ein Ding namens
link_wechsel
gibt es in PHP ganz bestimmt nicht. Das ist der Name einer CSS Klasse
Nein. Ein Ding namens „CSS Klasse“ gibt es in HTML ganz bestimmt nicht. (Auch nicht ohne Deppenleerzeichen.)
Cheatah hat das seinerzeit auf den Hund – äh Punkt gebracht. (Disclaimer: „Blondine“ ist m/w/d und hat nichts mit Haarfarbe zu tun.)
Es sei denn, du meinst präsentationsbezogenes Markup.
LLAP 🖖
Hallo,
m/w/d
fehlt da nicht noch das h? männlich/weiblich/dämlich/herrlich…
Gruß
Kalk
@@Rolf B
Der Internet Explorer 6 unterstützt das nicht. Den benutzen in Deutschland noch 0.03% aller Anwender (erstaunlich! so viele?!?!).
“IE6 and IE7 in your server logs are probably spam bots, not real users.” —Chris Heilmann
Hallo beatovich,
Viel weniger Code
Meine Meinung dazu: Das ist jetzt zu wenig. Parameter zu verwenden, um sich let oder var zu sparen, ist schlechter Stil. Das darf kann ein Mini-/Uglifizierer ausspucken, aber ein Mensch sollte das nicht tun. Und Variablen sollte man sprechend benennen.
Aber wo wir gerade dabei sind - könnte man das Folgende irgendwie zum Funktionieren bringen? Wenn man es einfach so verwendet wie geschrieben, könnte - je nach Seitenadresse - ein ungültiger Selektor herauskommen. Wie muss man escapen? CSS.escape() ist ja noch nicht wirklich Standard, gibt's dafür einen brauchbaren Polyfill?
function setAriaCurrentPage(){
var selfNodes = document.querySelectorAll("a[href"+location.href+"]");
for(i=0; i<selfNodes.length; i++){
selfNodes[i].setAttribute("aria-current","page");
}
}
Rolf
hallo
Hallo beatovich,
Viel weniger Code
Meine Meinung dazu: Das ist jetzt zu wenig. Parameter zu verwenden, um sich let oder var zu sparen, ist schlechter Stil. Das darf kann ein Mini-/Uglifizierer ausspucken, aber ein Mensch sollte das nicht tun. Und Variablen sollte man sprechend benennen.
Aber wo wir gerade dabei sind - könnte man das Folgende irgendwie zum Funktionieren bringen? Wenn man es einfach so verwendet wie geschrieben, könnte - je nach Seitenadresse - ein ungültiger Selektor herauskommen. Wie muss man escapen?
function setAriaCurrentPage(){ var selfNodes = document.querySelectorAll("a[href"+location.href+"]");
Du glaubst doch nicht etwa, dass href Attribute volle URIs enthalten.
for(i=0; i<selfNodes.length; i++){ selfNodes[i].setAttribute("aria-current","page"); } }
Hallo beatovich,
ah Mist, Attribut und Property verwechselt.
Rolf
hallo
Meine Meinung dazu: Das ist jetzt zu wenig. Parameter zu verwenden, um sich let oder var zu sparen, ist schlechter Stil.
Da will ich jetzt eine technische Begründung dazu.
Hallo beatovich
Meine Meinung dazu: Das ist jetzt zu wenig. Parameter zu verwenden, um sich let oder var zu sparen, ist schlechter Stil.
Da will ich jetzt eine technische Begründung dazu.
Parameter an Stelle von lokalen Variablen zu deklarieren ist schlechter Stil, weil es den eigentlichen Zweck der Namensbindung verschleiert.
Wenn man für eine Funktion Parameter deklariert, dann bringt man damit zum Ausdruck, dass die Funktion bei ihrem Aufruf Argumente erwartet, welche an die in der Parameterliste notierten Namen gebunden werden sollen. Parameter definieren Eingabewerte für die Funktion. Lokale Variablen tun dies nicht.
Lokale Variablen dienen im Wesentlichen dazu, innerhalb der Funktion Zwischenergebnisse zu speichern, zum Beispiel um mehrfache Berechnungen des selben Wertes zu vermeiden oder um durch die Aufteilung längerer Ausdrücke die Lesbarkeit des Codes zu verbessern.
Parameter sind Teil der öffentlichen Schnittstelle einer Funktion.
Dass Parameter wie in ECMAScript einen impliziten Standardwert besitzen, ist keine Selbstverständlichkeit. Die wohl meisten Programmiersprachen würden einen Funktionsaufruf mit einem Fehler quittieren, bei dem weniger Argumente übergeben werden als zuvor Parameter deklariert wurden.
Nehmen wird zum Beispiel die folgende Funktion in Rust:
fn add(a: i32, b: i32) -> i32 { a + b }
Folgender Aufruf führt zu einem Fehler:
fn main() {
let result = add(5);
}
// error: this function takes 2 parameters but 1 parameter was supplied
In einigen Sprachen können sogar im selben Scope mehrere Funktionen oder Funktionsklauseln mit demselben Namen deklariert werden. Der Compiler oder Interpreter entscheidet dann nach Anzahl und gegebenenfalls Typ der formalen Parameter, welche Funktion beziehungsweise Klausel aufgerufen wird.
Hierzu ein Beispiel in Elixir:
defmodule Math do
def add(a, b), do: a + b
def add(a, b, c), do: a + add(b, c)
end
IO.puts Math.add(2, 3, 5)
In ECMAScript wird zwar bei zuwenig Argumenten beim Funktionsaufruf kein Fehler geworfen und es können nicht mehrere Funktionen unter demselben Namen im selben Scope deklariert werden, aber auch hier gilt, dass über die Parameter Informationen über die Funktion nach außen gegeben werden.
const add = (a, b) => a + b;
add.length // 2
Die Eigenschaft length von Funktionsobjekten gibt Auskunft darüber, wieviele Argumente von der Funktion erwartet werden. Genauer gesagt, wird dadurch sogar kommuniziert, wieviele Werte in jedem Fall übergeben werden sollten, da Parameter mit explizitem Standardwert ebenso wie Restparameter nicht mitgezählt werden.
Das tritt als Begründung allerdings hinter den Aspekt der Menschenlesbarkeit zurück.
Betrachte ich als Programmierer eine Funktion, dann geht der erste Blick in Richtung Signatur: Welchen Namen hat die Funktion? Welche Parameter besitzt sie? Wieviele Parameter gibt es und welche Werte werden an der jeweiligen Stelle erwartet? Ich würde nie damit rechnen, dass Parameter deklariert wurden, obwohl überhaupt keine Eingabewerte erwartet werden.
Eine solche Praxis erschwert das Verständnis des Codes massiv. Ein Blick auf die Funktionssignatur reicht nun nicht mehr aus, um zu Verstehen, wie mit der Funktion umzugehen ist. Stattdessen sind Leser gezwungen, auch den Körper der Funktion zu untersuchen, um zu erkennen, welche Werte beim Aufruf übergeben werden müssen.
Viele Grüße,
Orlok
Hallo beatovich,
(edit: Orlok hat parallel gepostet)
es geht hier nicht um die Technik.
Technisch ist es (fast) wurscht, ob ich Parameter definiere oder mit var lokale Variablen anlege. Beides landet auf dem Stack, beide sind in der ganzen Funktion sichtbar und beiden kann ich Werte zuweisen.
Aber Parameter und lokale Variablen sind Dinge mit unterschiedlicher Semantik. Und dafür soll man auch das semantisch richtige Sprachelement verwenden. In HTML kämpfst Du dafür. Dann mach's auch im JS 😀
Wenn ich sehe, das eine Funktion Parameter definiert, frage ich mich als Anwender welche Argumente sie wohl will. Das ist verwirrend, weil Du ja gar keine willst und nichts von dem verwendest, was ich Dir vertrauensvoll übergebe.
Ein kleiner technischer Unterschied besteht übrigens, wenn man das Initialisieren vergisst. Lokale Variablen sind grundsätzlich undefined
. Ein Parameter KANN einen Wert haben, wenn ein Argument übergeben wird.
Rolf
hallo
Hallo beatovich,
(edit: Orlok hat parallel gepostet)
es geht hier nicht um die Technik.
Ein kleiner technischer Unterschied besteht übrigens, wenn man das Initialisieren vergisst.
Dann wär's eben ein echter Paramter.
Hallo beatovich,
aber orginal.
Rolf
Hallo beatovich,
Dann wär's eben ein echter Paramter.
Du meinst Beamter?
Bis demnächst
Matthias