[GELÖST] onFocus bei Menü klappt nicht

Luke144 · 17. Aug. 2017

Hallo Leute,

nach tagelangen erfolglosen Recherchen und Versuchen seid ihr meine letzte Hoffnung.
Ich kämpfe mit einem für euch sicherlich einfachen, für mich allerdings verzwickten Problem:
Ich habe ein simples Kopfzeilen-Menü (6 Menüpunkte) in Form von sechs aneinandergereihten Div-Containern programmiert.
Jeder Div-Container enthält zwei Menügrafiken die bei onMouseOver wechseln und bei Klick das jeweilige html-doc laden. Das klappt einwandfrei. Soweit so gut!

Was mich stört: Nachdem der Besucher auf einen Menüpunkt geklickt hat, wird zwar dessen Content geladen und er sieht Menügrafik 2, danach springt der Browser leider sofort wieder auf Menügrafik 1.
Ich möchte erreichen, dass Menügrafik2 "stehen bleibt" um dem Besucher zu visualisieren auf welchem der 6 Menüpunkte er sich befindet. (Anm.: Sobald er auf einen anderen Menüpunkt klickt, muss beim verlassenen Menüpunkt natürlich wieder "Menügrafik1" geladen werden.)

In diesem Zusammenhang habe ich versucht das Focus-Ereignis zu nutzen.
Div-Container 1 (von 6, äquivalent):

HTML:

<div style="float:left;"><a id="menupkt1" href="Aktiv.html" target="Body"><img src="Images/Menupkt1_Grafik1.gif" onMouseOver="this.src='Images/Menupkt1_Grafik2.gif'" onMouseOut="this.src='Images/Menupkt1_Grafik1.gif'" onFocus="this.src='Images/Menupkt1_Grafik2.gif" alt="" width="91" height="48" border="0" /></a></div>

Leider funktioniert der onFocus-Code nicht.

Alternativ habe ich es über eine JS-Funktion versucht:

HTML:

<script type="text/javascript">
function getfocus() {
    document.getElementById("menupkt1").focus();
}

function losefocus() {
    document.getElementById("menupkt1").blur();
}
</script>


<div style="float:left;"><a id="menupkt1" href="Aktiv.html" target="Body"><img src="Images/Menupkt1_Grafik1.gif" onMouseOver="this.src='Images/Menupkt1_Grafik2.gif'" onMouseOut="this.src='Images/Menupkt1_Grafik1.gif'" onClick="getfocus()" alt="" width="91" height="48" border="0" /></a></div>

Klappt leider auch nicht.

Außerdem weiss ich nicht wie ich den "losefocus()" Aufruf einbaue.

Ich würde ich sehr freuen wenn ihr mir da weiterhelfen könntet.
Diese kl. Navigationsverfeinerung ist irgendwie komplexer als ich dachte

Greets,
Erich

andreax · 17. Aug. 2017

um zu focusieren musst du noch in dein Tag wenn es kein A Tag ist, das Attribut tabindex einbauen tabindex="123"

es gibt so weit ich weis kein loosefocus dafür kann man den blur Event nutzen.

andreax · 18. Aug. 2017

Das a Tag schnappt dir immer den Focus weg .

So funktionierts ohne a Tag

HTML:

<img tabindex="0" src="Images/Menupkt1_Grafik1.gif" onMouseOver = this.src="Images/Menupkt1_Grafik2.gif"
 onfocus = this.src="Images/Menupkt1_Grafik2.gif" onmouseout = this.src="Images/Menupkt1_Grafik1.gif" />

Luke144 · 18. Aug. 2017

Hallo Andreax,

erstmal vielen Dank, dass du dich meines Problem angenommen hast.
Ich habe gestern Nacht einige Versuche unternommen (sry, vergessen zu antworten :disturbed:

).

Nach deinem Tipp mit Tabindex sieht der Code nun wie folgt aus:

HTML:

<div style="float:left;"><a id="menupkt1" href="Aktiv.html" target="Body"><img src="Images/Menupkt1_Grafik1.gif" onMouseOver="this.src='Images/Menupkt1_Grafik2.gif'" onMouseOut="this.src='Images/Menupkt1_Grafik1.gif'" onFocus="this.src='Images/Menupkt1_Grafik2.gif'" tabindex="123" alt="" width="91" height="48" border="0" /></a></div>

Ich habe nach ein paar Versuchen auch bemerkt, dass er zwar jetzt fokussiert, aber der a-Tag mir den Fokus wegnimmt.
Das Problem: Ich komme um die Verlinkung nicht herum. Es handelt sich um die Seitennavigation

Lässt sich der a-Tag alternativ über über das "onClick" Event realisieren?

kkapsner · 22. Aug. 2017

Luke144 schrieb:
Lässt sich der a-Tag alternativ über über das "onClick" Event realisieren?

Ja, aber dass ist nicht gut, da du damit die Barrierefreiheit deiner Seite massiv einschränkst. Du müsstest dann massiv mit aria-Attributen nacharbeiten.

Ich sehe aber, dass du sowieso nacharbeiten musst. Du hast als einziges graphisches Element, das dem Benutzer anzeigt, wo die Navigation hinführt, ein Bild. Wenn das Bild nicht angezeigt wird oder nicht gesehen werden kann hat der Benutzer keine Ahnung, wo die Reise hin geht. Du solltest da dringend das alt-Attribut befüllen.

Dein Problem ist auch weniger das <a>, sondern die Tatsache, dass dein Status des Bildes in keinster Weise von der URL/angezeigten Seite abhängt. Ich würde den Bildwechsel komplett über CSS machen und dann den aktuellen Menüpunkt über eine CSS-Klasse:

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
img {
	border: 1px dashed gray;
}
img.active {
	display: none;
}
a.active img.active, a:hover img.active {
	display: initial;
}
a.active img.inactive, a:hover img.inactive {
	display: none;
}
</style>
</head>
<body>
<nav>
	<a href="page1.html">
		<img width="100" class="inactive" src="page1.png" alt="page 1">
		<img width="100" class="active" src="a_page1.png" alt="page 1 active">
	</a>
	<a href="page2.html" class="active">
		<img width="100" class="inactive" src="page1.png" alt="page 2">
		<img width="100" class="active" src="a_page1.png" alt="page 2 active">
	</a>
	<a href="page3.html">
		<img width="100" class="inactive" src="page1.png" alt="page 3">
		<img width="100" class="active" src="a_page1.png" alt="page 3 active">
	</a>
	<a href="page4.html">
		<img width="100" class="inactive" src="page1.png" alt="page 4">
		<img width="100" class="active" src="a_page1.png" alt="page 4 active">
	</a>
</nav>
</body>
</html>

schöner ist es aber noch, wenn du nur ein Bild (deine beiden jetzigen Bilder zusammenkleben) pro Menüpunkt verwendest und immer nur den gewünschten Teil anzeigen lässt. (z.B. per background-image anzeigen und dann per background-position verschieben). Das verhindert hässliches Nachladeflimmern.

Luke144 · 22. Aug. 2017

Hallo,
danke für deinen Tipp!
Die Navigation mit CMS zu realisieren habe ich auch schon versucht. Bin aber wieder an dem a-Tag in Kombination mit :active, :focus und :hover gescheitert.
img.active, img.inactive werde ich die Tage ausprobieren. Gebe Bescheid.

Luke144 · 30. Aug. 2017

Hallo kkapsner,

ich habe mich in HTML5 <nav> und CSS, Bilder per Hover wechseln, eingelesen um dein Coding und die dahintergelagerte Logik (Abhängigkeit Bild zu URL, etc.) besser zu verstehen. Danke nochmals für den Ansatz!
Anm.: Ich glaube Bilderwechsel per background-position verschieben ist nicht notwendig da die Menügrafiken unter 3kb gross sind. ?!

Meine neue Menu.html:

HTML:

<!DOCTYPE html>

<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">
img {
	border: 0px dashed gray; /*Wert 0 - kein Rahmen benötigt */
}
img.active {
	display: none;
}
a.active img.active, a:hover img.active {
	display: initial;
}
a.active img.inactive, a:hover img.inactive {
	display: none;
}
</style>
</head>

<body bgcolor="#ffffff">

<div style="position:absolute; width:682px; top:25px; left:50%; margin-left:-341px;"> <!-- BEGINN zentrierter Div-Container -->

<div style="float:left;"><img src="Images/Bilder/Head_CdG_05.gif" width="131" height="48" alt="" border="0" /></div> <!-- Linie links (nur Grafik, kein Link) -->

<nav>
	<div style="float:left;">
    	    	<a href="home.php" target="Body">
			<img width="82" height="48" class="inactive" src="Images/Bilder/Head_CdG_06.gif" alt="page 1">
			<img width="82" height="48" class="active" src="Images/Bilder/Head_CdG_060.gif" alt="page 1 active">
		</a>
	</div>
	<div style="float:left;">
		<a href="aktuelles.php" target="Body">
			<img width="79" height="48" class="inactive" src="Images/Bilder/Head_CdG_07.gif" alt="page 2">
			<img width="79" height="48" class="active" src="Images/Bilder/Head_CdG_070.gif" alt="page 2 active">
		</a>
	</div>
	<div style="float:left;">
		<a href="Aktiv.html" target="Body">
			<img width="91" height="48" class="inactive" src="Images/Bilder/Head_CdG_08.gif" alt="page 3">
			<img width="91" height="48" class="active" src="Images/Bilder/Head_CdG_080.gif" alt="page 3 active">
		</a>
	</div>
	<div style="float:left;">
		<a href="Vorstand.html" target="Body">
			<img width="83" height="48" class="inactive" src="Images/Bilder/Head_CdG_09.gif" alt="page 4">
			<img width="83" height="48" class="active" src="Images/Bilder/Head_CdG_090.gif" alt="page 4 active">
		</a>
	</div>
	<div style="float:left;">
    	    	<a href="Anmeldung.html" target="Body">
			<img width="97" height="48" class="inactive" src="Images/Bilder/Head_CdG_10.gif" alt="page 5">
			<img width="97" height="48" class="active" src="Images/Bilder/Head_CdG_100.gif" alt="page 5 active">
		</a>
	</div>
	<div style="float:left;">
		<a href="Kontaktinfo.html" target="Body">
			<img width="98" height="48" class="inactive" src="Images/Bilder/Head_CdG_03.gif" alt="page 6">
			<img width="98" height="48" class="active" src="Images/Bilder/Head_CdG_030.gif" alt="page 6 active">
		</a>
	</div>      
</nav>

<div style="float:left;"><img src="Images/Bilder/Head_CdG_04.gif" width="20" height="48" alt="" border="0" /></div> <!-- Linie rechts (nur Grafik, kein Link) -->

<div style="float:left;"><img src="Images/Bilder/Head_CdG_05a.gif" width="131" height="2" alt="" border="0" /></div> <!-- Linie1 (ergibt Doppellinie) darunter -->
<div style="float:left;"><img src="Images/Bilder/Head_CdG_13.gif" width="253" height="2" alt="" border="0" /></div>  <!-- Linie2 darunter -->
<div style="float:left;"><img src="Images/Bilder/Head_CdG_12.gif" width="284" height="2" alt="" border="0" /></div>  <!-- Linie3 darunter -->

</div> <!-- ENDE zentrierter Div-Container -->

</body>
</html>

Leider kämpfe ich noch mit zwei lästigen Problemen:

Problem 1 - "page x active" funkt nicht:
Chrome/Edge/Firefox: Hover funktioniert, aber "page x active" klappt leider nicht. D.h., die zweite Grafik (aktives Menü) bleibt nicht stehen nachdem draufgeklickt wurde. :confusion:

Safari (am iPhone getestet): Hier funktioniert "page x active"! Offensichtlich ist die HTML5 u. CSS Unterstützung besser - kurios, oder?!

Problem 2 - Abstand Doppellinie:
Unterhalb des Menü's befindet sich eine Doppellinie (bestehend aus zwei Einzellinien-Grafiken) welche ohne Abstand angezeigt werden sollen. Leider machen alle Browser einen Abstand zw. den Linien (s. Anhang). Ich vermute ein Position-Problem mit den Divcontainern. Leider habe ich noch nicht herausgefunden woran es scheitert. Habe mit "margin" herumexperimentiert, klappte leider nicht

Für Hilfe wäre ich sehr dankbar. Es ist eine kl. Non-Profit Website. Betreue das ehrenamtlich.

Gruß,
Erich

- - - Aktualisiert - - -

Anm.: Ich habe dir schon vor drei Tagen geantwortet, habe jedoch jetzt erst bemerkt, dass mein Beitrag nicht freigeschaltet wurde. ?!
Hat gerade eben auch erst im dritten Anlauf geklappt.

kkapsner · 30. Aug. 2017

Was ist denn mit

Luke144 schrieb:
target="Body"

genau gemeint? Hast du da ein <frameset> oder ein <iframe>?

Das mit der Doppellinie lässt sich ziemlich sicher beheben, indem du die Zeilenumbrüche zwischen den <div>s entfernst.

PS: Sind die ganzen "float:left;"s wirklich nötig?

Luke144 · 30. Aug. 2017

Ja, mein Vorgänger hat ein veraltetes Frameset verwendet. Alles Geschichte!

Ich habe heute die gesamte Site auf php umgestellt.

menu.php:

HTML:

<body>

<div style="float:left;"><img src="../Images/Bilder/Head_CdG_05.gif" width="131" height="48" alt="" border="0" /></div> <!-- Linie links (nur Grafik, kein Link) -->

<nav>
	<div style="float:left;"><a href="index.php?go=0&to=0"><img width="82" height="48" class="inactive" src="../Images/Bilder/Head_CdG_06.gif" alt="page 1"><img width="82" height="48" class="active" src="../Images/Bilder/Head_CdG_060.gif" alt="page 1 active"></a></div>
    
    <div style="float:left;"><a href="index.php?go=1&to=0"><img width="79" height="48" class="inactive" src="../Images/Bilder/Head_CdG_07.gif" alt="page 2"><img width="79" height="48" class="active" src="../Images/Bilder/Head_CdG_070.gif" alt="page 2 active"></a></div>
    
    <div style="float:left;"><a href="index.php?go=2&to=0"><img width="91" height="48" class="inactive" src="../Images/Bilder/Head_CdG_08.gif" alt="page 3"><img width="91" height="48" class="active" src="../Images/Bilder/Head_CdG_080.gif" alt="page 3 active"></a></div>
    
    <div style="float:left;"><a href="index.php?go=3&to=0"><img width="83" height="48" class="inactive" src="../Images/Bilder/Head_CdG_09.gif" alt="page 4"><img width="83" height="48" class="active" src="../Images/Bilder/Head_CdG_090.gif" alt="page 4 active"></a></div>
    
    <div style="float:left;"><a href="index.php?go=4&to=0"><img width="97" height="48" class="inactive" src="../Images/Bilder/Head_CdG_10.gif" alt="page 5"><img width="97" height="48" class="active" src="../Images/Bilder/Head_CdG_100.gif" alt="page 5 active"></a></div>
    
    <div style="float:left;"><a href="index.php?go=5&to=0"><img width="98" height="48" class="inactive" src="../Images/Bilder/Head_CdG_03.gif" alt="page 6"><img width="98" height="48" class="active" src="../Images/Bilder/Head_CdG_030.gif" alt="page 6 active"></a></div>      
</nav>

<div style="float:left;"><img src="../Images/Bilder/Head_CdG_04.gif" width="20" height="48" alt="" border="0" /></div> <!-- Linie rechts (nur Grafik, kein Link) -->

<div style="float:left;"><img src="../Images/Bilder/Head_CdG_05a.gif" width="131" height="2" alt="" border="0" /></div> <!-- Linie1 darunter -->
<div style="float:left;"><img src="../Images/Bilder/Head_CdG_13.gif" width="253" height="2" alt="" border="0" /></div>  <!-- Linie2 darunter -->
<div style="float:left;"><img src="../Images/Bilder/Head_CdG_12.gif" width="284" height="2" alt="" border="0" /></div>  <!-- Linie3 darunter -->

</body>

ad float:left: Anscheinend ja. Wenn ich sie entferne würfelt er die Positionen durcheinander. Obwohl: Ist float:left nicht default?

Problem2 Doppellinie GELÖST durch entfernen der Returns zw. den Div's! DANKEEE f. d. entscheidenden Tipp! Auf so etwas simples wäre ich gar nicht (gleich) gekommen :abnormal:

Problem1 existiert leider nach wie vor. "page x active" funkt nicht. Das angeklickte Bild bleibt leider nicht stehen. Noch irgendeine Idee?

kkapsner · 31. Aug. 2017

Luke144 schrieb:
ad float:left: Anscheinend ja. Wenn ich sie entferne würfelt er die Positionen durcheinander. Obwohl: Ist float:left nicht default?

Nein. Standard ist float: none;. Aber wenn du Elemente in einer Zeile haben willst, solltest du auch inline-Elemente (wie z.B. span) verwenden... aber in dem <nav> verstehe ich sowieso nicht, warum die die <div>s überhaupt hast.

Luke144 schrieb:
Problem1 existiert leider nach wie vor. [...] Noch irgendeine Idee?

Du musst dann im PHP natürlich bei dem entsprechenden <a> ein class="active" im HTML ergänzen.

Luke144 · 31. Aug. 2017

1.)

Aber wenn du Elemente in einer Zeile haben willst, solltest du auch inline-Elemente (wie z.B. span) verwenden... aber in dem <nav> verstehe ich sowieso nicht, warum

die die <div>s überhaupt hast.

Meinst du, dass ich die div's durch list's ersetzen soll?
Etwa so:

HTML:

<nav>
<h2>Navigation</h2>
<ul>
<li><a...> Link 1</a></li>
<li><a...> Link 2</a></li>
<li><a...> Link 3</a></li>
</ul>
</nav>

Also:

HTML:

<nav>
<ul>
<li><a class="active" href="index.php?go=0&to=0"><img width="82" height="48" class="inactive" src="http://forum.jswelt.de/Images/Bilder/Head_CdG_06.gif" alt="page 1"><img width="82" 

height="48" class="active" src="http://forum.jswelt.de/Images/Bilder/Head_CdG_060.gif" alt="page 1 active"></a></li>
</ul>
</nav>

2.)

Du musst dann im PHP natürlich bei dem entsprechenden <a> ein class="active" im HTML ergänzen.

Meinst du:

HTML:

<a class="active" href="index.php?go=0&to=0">

3.) Zur Erläuterung: Meine neue Navigation sieht aktuell wie folgt aus:
index.php:

PHP:

<?php
include "engine.php";
#Seitennavigation
if(isset($_GET['go']) && is_numeric($_GET['go'])) $go=(int)$_GET['go'];
elseif(isset($_GET['go'])) $go=$_GET['go'];
else $go='start';
if(isset($_GET['to'])) $to=(int)$_GET['to'];
else $to=0;
if(empty($link[$go][$to]) && $to==0) $to=1;
if(empty($link[$go][$to])){
$go='welcome';
$to=0;
}
?>

HTML-Teil index.php:

HTML:

<body>
<div class="div-main"> <!-- BEGINN zentrierter div-hauptcontainer -->
<div id="div-menu"><?php include 'menu.php'; ?></div>
<div id="div-content"><?php include "../".$link[$go][$to]; ?></div>
</div> <!-- ENDE zentrierter div-hauptcontainer -->
</body>

engine.php:

PHP:

<?php
$link['welcome'][0]="home.php";
$link[0][0]='home.php';
$link[1][0]='aktuelles.php';
$link[2][0]='aktiv.php';
$link[3][0]='vorstand.php';
$link[4][0]='anmeldung.php';
$link[5][0]='kontaktinfo.php';
?>

menu.php: siehe oben

cdg.css:

HTML:

.div-main { 
	position:absolute;
	width:700px; 
	top:25px;
	left:50%;
	margin-left:-350px;
}

#div-menu { 
	float: both; 
	margin-left: 0px; 
	margin-top: 0px; 
}

#div-content { 
	float: both; 
	margin-left: 0px; 
	margin-top: 140px; 
}

mikdoe · 31. Aug. 2017

luke: bitte nächstes mal auf freischaltung warten und nicht 1000 mal absenden! ich darf das jetzt alles wieder löschen

Luke144 · 31. Aug. 2017

Sry, ich habe drei Tage auf Freischaltung gewartet und dachte mit meinem Konto ist etwas nicht in Ordnung.

mikdoe · 31. Aug. 2017

Luke144 schrieb:
Sry, ich habe drei Tage auf Freischaltung gewartet

nie und nimmer!

Luke144 schrieb:
und dachte mit meinem Konto ist etwas nicht in Ordnung.

und weil du denkst es liegt ein fehler vor, verursachst du zur sicherheit gleich noch viel mehr fehler anstatt dich zu melden?

kkapsner · 31. Aug. 2017

Luke144 schrieb:
Meinst du, dass ich die div's durch list's ersetzen soll?

Wenn du die haben willst, aber eigentlich brauchs du ja gar nichts. Die <a> können ja auch alleine stehen.

Luke144 schrieb:
Meinst du:

ja.

zu 3.: das musst du entsprechend umbauen, dass das nur bei dem aktuellen gesetzt wird.

Luke144 · 01. Sep. 2017

Wenn du die haben willst, aber eigentlich brauchs du ja gar nichts. Die <a> können ja auch alleine stehen.

Warum? Weil sie sich innerhalb des <nav>-tags befinden? (Die div-container brauche ich doch zum Positionieren. ?!)

ad 3.:das musst du entsprechend umbauen, dass das nur bei dem aktuellen gesetzt wird.

Welche Stelle meinst du genau?
Diese?
index.php

HTML:

<div id="div-content"><?php include "../".$link[$go][$to]; ?></div>

oder den <nav>-Teil in der menu.php?

HTML:

<a class="active" href="index.php?go=0&to=0"><img width="82" height="48" class="inactive" src="http://forum.jswelt.de/Images/Bilder/Head_CdG_06.gif" alt="page 1"><img width="82" 

height="48" class="active" src="http://forum.jswelt.de/Images/Bilder/Head_CdG_060.gif" alt="page 1 active"></a>

Was ich erreichen will:
Der div-container "menu" soll als header für die Navigation dienen und dynamisch über php include befüllt werden. Das funktioniert soweit!

Der div-container "content" soll ohne neuladen der gesamten Seite über php include in Abhängigkeit von "menu" befüllt werden.
Die Navigation funktioniert soweit aber php findet mein Verzeichnis zu den Grafiken (root/Images/Bilder) nicht. Irgendetwas scheint beim Zusammenbasteln des Links (var. $link) nicht zu stimmen.
Zeile:

PHP:

<div id="div-content"><?php include "../".$link[$go][$to]; ?></div>

Viell. finde ich heute Abend (doch) noch den Fehler

kkapsner · 03. Sep. 2017

Luke144 schrieb:
Warum? Weil sie sich innerhalb des <nav>-tags befinden?

Nein, weil ein <a> auch einfach alleine stehen kann. Das muss ja nur innerhalb der <body>s sein...

Luke144 schrieb:
(Die div-container brauche ich doch zum Positionieren. ?!)

Nein, du kannst ja auch die <a>s selbst direkt positionieren.

Luke144 schrieb:
oder den <nav>-Teil in der menu.php?

Natürlich das Menü.

Luke144 schrieb:
ohne neuladen der gesamten Seite über php include

Das widerspricht sich. PHP includes werden auf dem Server ausgeführt, also immer nur, wenn der Browser die Seite neu abfrägt. Wenn du ohne reload arbeiten willst, musst du mit AJAX arbeiten.

Luke144 · 05. Sep. 2017

Das widerspricht sich. PHP includes werden auf dem Server ausgeführt, also immer nur, wenn der Browser die Seite neu abfrägt. Wenn du ohne reload arbeiten willst, musst du mit AJAX arbeiten.

Sry. Ich habe mich schlecht ausgedrückt.
Ohne reload muss es nicht funktionieren. Abgesehen davon habe ich mit AJAX kaum Erfahrung (nur einmal eine Fancybox implementiert).
Es genügt mir schon wenn die Navigation dynamisch und wie beschrieben funktioniert:
"menu-div" = header
"content-div" = body
Ich wollte halt nur wissen ob mein Aufbau und die Logik aus deiner Sicht so passen oder ob es einen besseren Ansatz (statt includes?) gibt.
Konkret spreche ich hier Punkt 3.) meines Postings vom 31-08-2017, 10:07 Uhr an.

Luke144 · 08. Sep. 2017

Hallo,

ich habe in den verg. Tagen die alte Site gänzlich durch die neue ersetzt.
Das ganze funktioniert soweit.

Allerdings kämpfe ich immer noch mit dem "page x active" Problem (das angeklickte Bild beim aktiven Menüpunkt bleibt nicht stehen).

Deinem Rat zufolge

Du musst dann im PHP natürlich bei dem entsprechenden <a> ein class="active" im HTML ergänzen.

habe ich die menu.php wie folgt ergänzt:

PHP:

<?php
#aktiver Menüpunkt
if($page1active=='true') $class='active';
elseif($page2active=='true') $class='active';
elseif($page3active=='true') $class='active';
elseif($page4active=='true') $class='active';
elseif($page5active=='true') $class='active';
elseif($page6active=='true') $class='active';
?>

HTML:

<body>
<nav>
<div style="float:left;"><?php $page1active='true' ?><a href="index.php?go=0&to=0" class="<?php echo $class ?>"><img width="82" height="48" class="inactive" src="Images/Bilder/Head_CdG_06.gif" alt="page 1"><img width="82" height="48" class="active" src="Images/Bilder/Head_CdG_060.gif" alt="page 1 active"></a></div>

<div style="float:left;"><?php $page2active='true' ?><a href="index.php?go=1&to=0" class="<?php echo $class ?>"><img width="79" height="48" class="inactive" src="Images/Bilder/Head_CdG_07.gif" alt="page 2"><img width="79" height="48" class="active" src="Images/Bilder/Head_CdG_070.gif" alt="page 2 active"></a></div>

<!-- usw. -->
</nav>
</body>

Das Problem: Irgendetwas stimmt mit der Abfrage nicht. Er zeigt mir nach wie vor nicht das angeklickte Bild des aktiven Menüpunktes an.

kkapsner · 17. Sep. 2017

Wo werden denn diese $pageXactive Variablen abhängig von der geladenen Seite gesetzt? Bzw. warum vergleichst du nicht direkt mit den GET-Variablen "go" und "to"?
Auch musst du die Überprüfung beim setzten der Klasse machen und nicht in einem großen elseif... sonst würden ja alle <a>s dann entweder ale oder keines das active bekommen.

Also konkret:

Code:

<div style="float:left;"><a href="index.php?go=0&to=0" class="<?php if ($go === "0" && $to === "0") echo "active"; ?>"><img width="82" height="48" class="inactive" src="Images/Bilder/Head_CdG_06.gif" alt="page 1"><img width="82" height="48" class="active" src="Images/Bilder/Head_CdG_060.gif" alt="page 1 active"></a></div>

<div style="float:left;"><a href="index.php?go=1&to=0" class="<?php if ($go === "1" && $to === "0") echo "active"; ?>"><img width="79" height="48" class="inactive" src="Images/Bilder/Head_CdG_07.gif" alt="page 2"><img width="79" height="48" class="active" src="Images/Bilder/Head_CdG_070.gif" alt="page 2 active"></a></div>

[GELÖST] onFocus bei Menü klappt nicht

Luke144

Guest

andreax

Guest

andreax

Guest

Luke144

Guest

Super Moderator

Luke144

Guest

Luke144

Guest

Anhänge

Super Moderator

Luke144

Guest

Super Moderator

Luke144

Guest

Moderator

Luke144

Guest

Moderator

Super Moderator

Luke144

Guest

Super Moderator

Luke144

Guest

Luke144

Guest

Super Moderator