SELF-Treffen in Mannheim 2025

SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.

Beispiel:Klassen mit JavaScript umschalten und mit CSS nutzen1.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
		<link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
		<title>Klassen mit JavaScript umschalten und mit CSS nutzen</title>
		<style>
span {
	color: #060;
	position: relative;
	visibility: hidden;
}

li span:before {
	border-bottom: 1px solid black;
	bottom: 0;
	content: "";
	position: absolute;
	visibility: visible;
	width: 100%;
}

.spoil span {
	visibility: visible;
}

ol {
	font-style: italic;
}

dd, li {
	margin-bottom: 1em;
}

.notice {
	background: #8f8;
	border: 2px solid #bfb;
	border-radius: 0.5em;
	float: right;
	margin-top: -3em;
	padding: 0.5em 1em;
	width: 11em;
}

.notice button {
	display: block;
	margin: 0 auto;
}

.notice button:after {
	content: attr(data-on);
}

.spoil .notice button:after {
	content: attr(data-off);
}
		</style>
		<script>
(function () {
	document.addEventListener("DOMContentLoaded", function () {
		var spoil = document.getElementById("spoil"),
			className = "spoil";

		if (spoil) {
			spoil.addEventListener("click", function () {
				document.body.classList.toggle(className);
			});
		}
	});
}());
		</script>
	</head>
	<body>
		<h1>Klassen mit JavaScript umschalten und mit CSS nutzen</h1>
		<main>
			<p>Haben Sie Lust auf Rätsel?</p>
			<p class="notice">
				Wenn in Ihrem Browser JavaScript aktiviert ist, können Sie alle Lösungen
				<button data-on="einblenden." data-off="ausblenden." id="spoil"></button>
			</p>

			<h2>Frühlingslied als Lückentext</h2>
			<ol>
				<li>
					Im Märzen der <span>Bauer</span> die <span>Rösslein</span> einspannt.<br>
					Er setzt seine <span>Felder</span> und <span>Wiesen</span> instand.<br>
					Er pflüget den <span>Boden</span>, er egget und <span>sät</span><br>
					und rührt seine <span>Hände</span> früh morgens und <span>spät</span>.
				</li>
				<li>
					Die Bäuerin, die <span>Mägde</span> sie dürfen <span>nicht</span> ruh'n.<br>
					Sie haben <span>im</span> Haus und im Garten zu <span>tun</span>.<br>
					Sie <span>graben</span> und <span>rechen</span> und <span>singen</span> ein Lied<br>
					und freu´n sich, wenn <span>alles</span> schön grünet und <span>blüht</span>.
				</li>
				<li>
					So geht <span>unter</span> Arbeit das <span>Frühjahr</span> vorbei.<br>
					Dann <span>erntet</span> der <span>Bauer</span> das <span>duftende</span> Heu.<br>
					Er <span>mäht</span> das <span>Getreide</span>, dann <span>drischt</span> er es <span>aus</span>.<br>
					Im <span>Winter</span> da gibt es manch herrlichen <span>Schmaus</span>.
				</li>
			</ol>
			<p>Wenn Sie das Lied singen möchten, gibt es hier das passende <a href="https://www.youtube.com/watch?v=LoJ4_9zyfe4">Youtube-Video zum Mitsingen</a> dazu.</p>

			<h2>Scherzfragen</h2>
			<dl>
				<dt>Was ist der Unterschied zwischen einer Geige und einem Klavier?</dt>
				<dd><span>Das Klavier brennt länger.</span></dd>
				<dt>Warum darf ein Allergiker Cola und Bier nicht gemischt trinken?</dt>
				<dd><span>Weil er sonst "ColaBiert".</span></dd>
				<dt>Kann ein Känguru höher springen als ein Haus?</dt>
				<dd><span>Ja, weil ein Haus nicht springen kann.</span></dd>
			</dl>
		</main>
	</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:Klassen_mit_JavaScript_umschalten_und_mit_CSS_nutzen1.html&oldid=44213“