Gruppen

Top Gruppen: Windows 7; Windows Vista; Windows XP; Textverarbeitung; Excel; DSL; Internet Browser; E-Mail/Outlook
Betriebsysteme: Windows classik; Linux; BS-Sonstige
Software: Datenbanken; Bildbearbeitung; Audio/mp3/Video; Security/Viren; SW-Sonstige
Hardware: Mainboard/CPU; Grafikkarten; Peripherie; Laptop/Notebook; HW-Sonstiges
Netzwerk: Telefon,ISDN,Modem; W-Lan; NW-Sonstiges
Programmierung: PHP,ASP,Perl...; Java,C++...; Webseiten/HTML
Sonstiges: PC-Sonstiges; Plauderecke; SN Intern; Test

/ Forum / Webseiten/HTML

Webseiten/HTML

Fragevon amaetz vom 26.07.2021, 12:56 Options

Beim Überschrift anklicken soll ein erklärender Text erscheinen

Hi zusammen,

auf meiner Hp hab ich verschiedene Leistungen ausgewiesen.
Ich hätte nun gerne, dass wenn man diese anklickt direkt untendrunter einige Zeilen der Erläuterung auftauchen.
Ich arbeite mit Dreamweaver.

Kann mir jemand helfen?
Vielen Dank schonmal

Antwort schreiben

Antwort 1 von kicia vom 04.08.2021, 10:52 Options

eine schnelle lösung wäre:


<html>
	<head>
		<style type="text/css">
			h1 { cursor:pointer; }
			span { background-color:#ffff99; display:none; cursor:pointer; }
		</style>
	</head>
	
	<body>
		<h1 onclick="this.nextSibling.style.display='inline'">Überschrift1</h1><span onclick="this.style.display='none'">informationen</span>
		<h1 onclick="this.nextSibling.style.display='inline'">Überschrift2</h1><span onclick="this.style.display='none'">informationen</span>
		<h1 onclick="this.nextSibling.style.display='inline'">Überschrift3</h1><span onclick="this.style.display='none'">informationen</span>
	</body>
</html>

ein bischen besser vielleicht:


<html>
	<head>
		<style type="text/css">
			h1 { cursor:pointer; }
			span.info { background-color:#ffff99; display:none; cursor:pointer; }
		</style>
		<script type="text/javascript">
			function init()
			{
				var elms = document.getElementsByTagName("h1");
				for( i = 0; i < elms.length; i++ )
				{
					elms[i].onclick = function() { this.nextSibling.style.display='inline'; };
					elms[i].nextSibling.onclick = function() { this.style.display='none'; };
				}
			}
		</script>
	</head>
	
	<body onLoad="init()">
		<h1>Überschrift1</h1><span class="info">informationen</span>
		<h1>Überschrift2</h1><span class="info">informationen</span>
		<h1>Überschrift3</h1><span class="info">informationen</span>
	</body>
</html>

Hinweis

Diese Frage ist schon etwas älter, Sie können daher nicht mehr auf sie antworten. Sollte Ihre Frage noch nicht gelöst sein, stellen Sie einfach eine neue Frage im Forum..

Neue Einträge

Tipp einschicken

News einschicken