CSS a:visited:focus funktioniert im IE nicht

sax · 20. Mai 2008

Hallo zusammen,

ich habe eine Seite mit Fragen und Antworten erstellt. Zunächst sind nur die Fragen sichtbar und die Antworten ausgeblendet. Klickt man auf die jeweilige Frage, wird der restliche Teil angezeigt.
Das hab ich realisiert in dem ich die gesamte Frage + Antwort als Link <a> definiert habe und den Antwortteil mit Hilfe des <span>-Tag nicht anzeigen lassen (CSS-Codei: display:none). Erst beim Daraufklicken (:active) wird die Antwort dann eingeblendet.

Auszug HTML-Datei

Code:

<a class="antwort" href="#keinsprung" hidefocus="true">Wie koche ich ein Ei?
   <span>
   Wasser in den Topf, Ei rein und nach 6 1/2 Minuten wieder raus.	
   </span>
</a>
<a class="antwort" href="#keinsprung" hidefocus="true">Gibts hier auch sinnvolle Fragen?
   <span>
   Nein.
   </span>
</a>

Auszug CSS-Datei

Code:

a.antwort,
a.antwort:link,
a.antwort:hover,
a.antwort:focus ,
a.antwort:active
	{
	position: relative;
	text-decoration: none;
	color: #000000;
	}

a.faq_antworten span
	{
	display: none;
	}	

[B]a.antwort:visited:active span,[/B]
a.antwort:focus span,
a.antwort:active span
	{
	outline-style:none;
	display: block;
	position: relative;
	width: auto;
	padding: 5px;
	text-align: justify;
	margin: 10px 0px;
	}

Der fett-markierte Teil soll nun realisieren, dass wenn ich mit der Maus z.B. den Scrollbalken anklicke, die Antwort noch sichtbar bleiben soll. Erst wenn ich auf eine andere Frage klicke, soll dann die Antwort der anderen Frage wieder verschwinden.
Das funktioniert auch soweit im Mozilla Firefox, im "tollen" Internet Explorer (7) nicht

Weiß jemand, wie ich das im IE realisieren kann?
Ich vermute, dass ich das wohl nur mit Javascript gelöst bekomme. Leider habe ich erst mit HTML/CSS angefangen und von Javascript bisher noch keine Ahnung.

sleeping~ · 20. Mai 2008

huhu,
ich will dir nicht den spass am scripting versauen, deswegen poste ich dir einfach mal 'n kleines js, dass ich mir gebastelt habe. vielleicht hilft es dir ja weiter. fals dein ergeiz nicht ausreicht, kann ich dir auch das script anpassen. aber probier's lieber erst einmal selbst :]

HTML:

<script type="text/javascript">
	var last = 0;
	function hide(id){
		if (id == last) {
			if (document.getElementById('day:'+id).style.display == '') {
				document.getElementById('day:'+id).style.display = 'none';
				document.getElementById('img:'+id).src = 'ardown.png';
			}
			else {
				document.getElementById('day:'+id).style.display = '';
				document.getElementById('img:'+id).src = 'arup.png';
			}
		}
		else {
			document.getElementById('day:'+last).style.display = 'none';
			document.getElementById('img:'+last).src = 'ardown.png';
			document.getElementById('day:'+id).style.display = '';
			document.getElementById('img:'+id).src = 'arup.png';
			last = id;
		}
	}
</script>

<body>

	<div onClick="hide(0)">2008-05-14<img id="img:0" src="arup.png"></div>
	<div id="day:0">zuzuzuzuzuzuh</div>

	<div onClick="hide(1)">2008-05-13<img id="img:1" src="ardown.png"></div>
	<div id="day:1" style="display: none">zuzuzuzuzuzuh</div>

	[...]

	<div onClick="hide(9)">2008-05-05<img id="img:9" src="ardown.png"></div>
	<div id="day:9" style="display: none">zuzuzuzuzuzuh</div>

</body>

bei dem script ist am anfang der erste 'eintrag' sichtbar, aber ich denke, dass du das hinbekommst

sax · 21. Mai 2008

hi sleeping~,

danke für deine Hilfe. Deine Lösung sieht recht gut aus. Meine auch zu verstehen, was der Code bedeutet. Und vermutlich werde ich das auch so umsetzen.

Ist halt nur echt schade, dass das mit dem IE nicht so geht und es im Mozilla ohne Probleme läuft. Durch diese "Kleinigkeit" muss ich halt nun das Ganze Menü umbauen, für jede Frage einen Container mit eigener ID verwenden. Mir wäre es lieber, wenn es irgendeine Möglichkeit in CSS geben würde.

Naja, ich mache jetzt erst mal den Inhalt soweit fertig und werde dann deinen Code anpassen.

Btw. hast du evtl. eine Seite, wo ich deiner Meinung nach ein gutes Tutorial zu Javascript finde? Das von de.selfhtml.org finde ich vom Aufbau her irgendwie nicht so besonders - kann nicht genau sagen wieso. Aber vielleicht muss ich's mir einfach noch mal anschauen.

Danke nochmal!

sax

sleeping~ · 21. Mai 2008

sorry - tutorials fuer javascript hab ich garkeine ... vielleicht hilft dir google ein wenig weiter.

wenn du die daten aus einer datenbank holst, sind die ID's kein problem ^^

sax · 4. Juni 2008

JavaScript-Funktion funktioniert beim ersten "onClick" nicht

Hallo noch mal,

ich hab jetzt die CSS-Funktion durch einen einfachen JavaScript-Code ähnlich deines Beispiels abgeändert. Es Funktioniert auch soweit ganz gut, jedoch habe ich noch ein Problem.

Wenn ich das ersten Mal auf eine Frage klicke, tut sich nichts, egal wie lange ich warte. Erst beim zweiten Mal drücken, wird dann der versteckte Teil angezeigt. Das ist bei allen Fragen so, die ich das erste Mal anklicke. Wurde eine Frage hingegen erst einmal erfolgreich inkl. Antwortteil aufgerufen, muss ich zukünftig auch nur noch einmal darauf klicken, um diese anzeigen bzw. verschwinden zu lassen - so wie es sein sollte!

Warum dauert es aber beim ersten Anwählen der Frage so lange?
Hier ist der Quellcode:

JavaScript

Code:

function frage(id)
{
	if(document.getElementById(id).style.display != 'none')
	{
	document.getElementById(id).style.display = 'none';
	}
	else
	{
	document.getElementById(id).style.display = 'block';
	}
}

HTML-Auszug

Code:

<ul class="antwort">
   <li>
      <a href="#keinsprung" onClick="frage('1')" hidefocus="true">Warum ist der Himmel blau?
         <span id="1">
         Gute Frage ...
         </span>
      </a>
   </li>
</ul>

CSS-Datei

Code:

ul.antwort li
	{
	margin:5px 0px;
	}

	
ul.antwort li a,
ul.antwort li a:link,
ul.antwort li a:visited
	{
	position: relative;
	text-decoration: none;
	color: #000000;
	}


ul.antwort li a:hover,
ul.antwort li a:active,
ul.antwort li a:focus
	{
	color: #727B97;
	}


ul.antwort li a span,
ul.antwort li a:link span,
ul.antwort li a:visited span,
ul.antwort li a:hover span,
ul.antwort li a:active span,
ul.antwort li a:focus span
	{
	outline-style:none;
	display: none;
	position: relative;
	width: auto;
	padding: 5px;
	text-align: justify;
	margin: 10px 10px 10px 0px;
	background-color:#727B97;
	border: 1px solid black;
	color: #000000;
	}

Bin etwas ratlos. Hat jemand vielleicht eine Idee, wo da der Fehler ist?

sleeping~ · 11. Juni 2008

Code:

function frage(id)
{
	if(document.getElementById(id).style.display != 'none')
	{
	document.getElementById(id).style.display = 'none';
	}
	else
	{
	document.getElementById(id).style.display = 'block';
	}
}

dein span element mit der id hat kein style (display), deswegen geht er automatisch in die if-klausel, da es ja nicht 'none' ist. none ist nicht garnichts

so sollte es gehen :

Code:

function frage(id)
{
	if(document.getElementById(id).style.display == 'block')
	{
	document.getElementById(id).style.display = 'none';
	}
	else
	{
	document.getElementById(id).style.display = 'block';
	}
}

edit:

hmm also deine css datei sagt mir so gut wie nichts ... was bedeutet das denn mit dem : "ul.antwort li a span" ... muesste dein span dann nicht die class="antwort" haben ?
erklaer mir das mal bitte :]

Suche

CSS a:visited:focus funktioniert im IE nicht

sax

Cadet 4th Year

sleeping~

Cadet 1st Year

sax

Cadet 4th Year

sleeping~

Cadet 1st Year

sax

Cadet 4th Year

sleeping~

Cadet 1st Year

Ähnliche Themen