Hallo, ich arbeite noch nicht so lange mit html und bin nun ein paar dinge am ausprobieren, doch nun scheitert es schon. Vielleicht kann mir jemand helfen?
Ich möchte das wenn man auf die Navipunkte klick, sich der Text einblendet (das tut er bereits) aber er soll sich auch wieder ausblenden wenn man nochmal darauf klickt.
hier meine Datei:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Headline</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px }
</style>
<style type="text/css">
@font-face { font-family:apercu; src:url(apercu.otf), url(apercu.otf); }
@font-face { font-family:apercu_bold; src:url(apercu_bold.otf), url(apercu_bold.otf); }
{
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#map {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
}
#ebenen {
position: absolute;
bottom: 80px;
left: 15px;
font-size: 12px;
font-family: 'Apercu_bold';
src:url (apercu_bold.otf);
color: #50afdb;
text-align: left;
line-height: auto;
z-index: 2;
overflow: auto;
}
#information {
position: absolute;
bottom: 50px;
left: 15px;
font-size: 12px;
font-family: 'Apercu';
src:url (apercu_regular.otf);
color: #50afdb;
text-align: left;
}
#agenda {
position: absolute;
bottom: 50px;
left: 90px;
font-size: 12px;
font-family: 'Apercu';
src:url (apercu_regular.otf);
color: #50afdb;
text-align: left; }
#colophon {
position: absolute;
bottom: 50px;
left: 145px;
font-size: 12px;
font-family: 'Apercu';
src:url (apercu_regular.otf);
color: #50afdb;
text-align: left;
}
#contact {
position: absolute;
bottom: 50px;
left: 220px;
font-size: 12px;
font-family: 'Apercu';
src:url (apercu_regular.otf);
color: #50afdb;
text-align: left;
}
</style>
<meta charset="UTF-8">
<script language="JavaScript" type="text/javascript">
<!--
function alleAusblenden(){
var elemente = document.getElementById("ebenen").getElementsByTagName("p");
for (var i = 0; i < elemente.length; i++) {
elemente.style.display = "none";
}
}
function einblenden(div){
alleAusblenden();
document.getElementById(div).style.display = "inline";
}
//-->
</script>
</head>
<body>
<div id="information" class="information"
<a href="#" onclick="einblenden('ebene1'); return false;"> information </a> </div>
<div id="agenda" class="agenda"
<a href="#" onclick="einblenden('ebene2'); return false;"> agenda </a></div>
<div id="colophon" class="colophon"
<a href="#" onclick="einblenden('ebene3'); return false;"> colophone </a></div>
<div id="contact" class="contact"
<a href="#" onclick="einblenden('ebene4'); return false;"> contact </a></div>
<div id="ebenen">
<p id="ebene1" style="display:none;">
information<br>
<br>
blindtext blindtext blindtext blindtext<br>
lindtext blindtext blindtext blindtext
</p>
<p id="ebene2" style="display:none;">
agenda<br>
<br>
september 19<br>
book blindtext<br>
blindtext blindetext blindetext<br>
blinder text<br>
blinden texte<br>
text text text<br>
<br>
text<br>
text blind<br>
blind blind text
</p>
<p id="ebene3" style="display:none;">
colophon<br>
<br>
blindtext blindtext blindtext blindtext<br>
lindtext blindtext blindtext blindtext<br>
lindtext blindtext blindtext blindtext<br>
blindtext blindtext blindtext blindtext<br>
lindtext blindtext blindtext blindtext<br>
lindtext blindtext blindtext blindtext
</p>
</p>
<p id="ebene4" style="display:none;">
contact<br>
<br>
blindtext blindtext blindtext blindtext<br>
lindtext blindtext blindtext blindtext<br>
lindtext blindtext blindtext blindtext<br>
blindtext blindtext blindtext blindtext<br>
lindtext blindtext blindtext blindtext<br>
lindtext blindtext blindtext blindtext
</p>
</div>
</body>
</html>
Ich möchte das wenn man auf die Navipunkte klick, sich der Text einblendet (das tut er bereits) aber er soll sich auch wieder ausblenden wenn man nochmal darauf klickt.
hier meine Datei:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Headline</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px }
</style>
<style type="text/css">
@font-face { font-family:apercu; src:url(apercu.otf), url(apercu.otf); }
@font-face { font-family:apercu_bold; src:url(apercu_bold.otf), url(apercu_bold.otf); }
{
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#map {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
}
#ebenen {
position: absolute;
bottom: 80px;
left: 15px;
font-size: 12px;
font-family: 'Apercu_bold';
src:url (apercu_bold.otf);
color: #50afdb;
text-align: left;
line-height: auto;
z-index: 2;
overflow: auto;
}
#information {
position: absolute;
bottom: 50px;
left: 15px;
font-size: 12px;
font-family: 'Apercu';
src:url (apercu_regular.otf);
color: #50afdb;
text-align: left;
}
#agenda {
position: absolute;
bottom: 50px;
left: 90px;
font-size: 12px;
font-family: 'Apercu';
src:url (apercu_regular.otf);
color: #50afdb;
text-align: left; }
#colophon {
position: absolute;
bottom: 50px;
left: 145px;
font-size: 12px;
font-family: 'Apercu';
src:url (apercu_regular.otf);
color: #50afdb;
text-align: left;
}
#contact {
position: absolute;
bottom: 50px;
left: 220px;
font-size: 12px;
font-family: 'Apercu';
src:url (apercu_regular.otf);
color: #50afdb;
text-align: left;
}
</style>
<meta charset="UTF-8">
<script language="JavaScript" type="text/javascript">
<!--
function alleAusblenden(){
var elemente = document.getElementById("ebenen").getElementsByTagName("p");
for (var i = 0; i < elemente.length; i++) {
elemente.style.display = "none";
}
}
function einblenden(div){
alleAusblenden();
document.getElementById(div).style.display = "inline";
}
//-->
</script>
</head>
<body>
<div id="information" class="information"
<a href="#" onclick="einblenden('ebene1'); return false;"> information </a> </div>
<div id="agenda" class="agenda"
<a href="#" onclick="einblenden('ebene2'); return false;"> agenda </a></div>
<div id="colophon" class="colophon"
<a href="#" onclick="einblenden('ebene3'); return false;"> colophone </a></div>
<div id="contact" class="contact"
<a href="#" onclick="einblenden('ebene4'); return false;"> contact </a></div>
<div id="ebenen">
<p id="ebene1" style="display:none;">
information<br>
<br>
blindtext blindtext blindtext blindtext<br>
lindtext blindtext blindtext blindtext
</p>
<p id="ebene2" style="display:none;">
agenda<br>
<br>
september 19<br>
book blindtext<br>
blindtext blindetext blindetext<br>
blinder text<br>
blinden texte<br>
text text text<br>
<br>
text<br>
text blind<br>
blind blind text
</p>
<p id="ebene3" style="display:none;">
colophon<br>
<br>
blindtext blindtext blindtext blindtext<br>
lindtext blindtext blindtext blindtext<br>
lindtext blindtext blindtext blindtext<br>
blindtext blindtext blindtext blindtext<br>
lindtext blindtext blindtext blindtext<br>
lindtext blindtext blindtext blindtext
</p>
</p>
<p id="ebene4" style="display:none;">
contact<br>
<br>
blindtext blindtext blindtext blindtext<br>
lindtext blindtext blindtext blindtext<br>
lindtext blindtext blindtext blindtext<br>
blindtext blindtext blindtext blindtext<br>
lindtext blindtext blindtext blindtext<br>
lindtext blindtext blindtext blindtext
</p>
</div>
</body>
</html>
Zuletzt bearbeitet: