152 Aufrufe
Gefragt in Webseiten HTML von
Ich würde gerne den Inhalt der in dem div "Content" drinne steht erst dann angzeigt bekommen, wenn man auf Zeugnisse klickt, ich habe das Gefühl, dass der Teil unter der Section "Zeugnisse" nicht ganz stimmt sicher bin ich mir aber nicht.

Ich habe auch in der css Datei den Inhalt in Content mit Display:none; ausgeblendet.

Weiß jemand von euch wo da der Fehler ist?

Vielen Dank schon mal im Voraus.

VG

Zaine

<!doctype html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial scale=1.0, maximum-scale1.0, user-scale=yes">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="animate.css">
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.menubutton').click(function(){
$('nav').slideToggle('slow');
});
});
</script>
<script type="text/javascript">
$("#Content").hide();
$("a").on("click", function(e){
e.preventDefault();
$("#Content").toggle();
});
</script>
<title>Downloads</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<section id="menubar">
<ul>
<li><a class="menubutton" href="#menu"><img src="images/menu.png" /></a></li>
</ul>
</section>
<header>
<h1>Downloads</h1>
</header>

<nav class="animated fadeInUp">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Downloads.html" class="active">Downloads</a></li>
<li><a href="index.html">Gästebuch</a></li>
<li><a href="index.html">Impressum</a></li>
</ul>
</nav>

<section id="mainDownloads">
<h2>Hier können Sie alle wichtigen Dokumente downloaden:</h2>

<ul>
<li><a href="#">Lebenslauf</a></li>
<li><a href="#">Profilbild</a></li>
</ul>
</section>

<section id="Zeugnisse">
<ul><a href="#Zeugnisse">Zeugnisse
<div id="Content">
<li><a href="#">Fachabitur1</a></li>
<li><a href="#">Fachabitur2</a></li>
<li><a href="#">Praktikumszeugnis1</a></li>
<li><a href="#">Praktikumszeugnis2</a></li>
</div>
</a>
</ul>
</section>
</body>
</html>

7 Antworten

0 Punkte
Beantwortet von computerschrat Profi (18.3k Punkte)
Hallo Zaine,

in der Section Zeugnisse sehe ich keine Probleme. Aber was steht denn im css?

Ganz klar ist mir auch das Script zum Umschalten der Sichtbarkeit nicht. Wann wird das ausgeführt?

Schau dir mal diese Seite an:
https://www.w3schools.com/css/css_display_visibility.asp
Dort ist ein Beispiel zum Ein-/und Ausblenden bei Klick.

Gruß
computerschrat
0 Punkte
Beantwortet von
Also in der css steht:

#Zeugnisse ul li a{
Display:none;
}

und dann noch weitere Sachen wie die Farbe usw.

muss der Display Value überhaupt auf None?

Das Script soll bei einem Klick auf Zeugnisse den Inhalt der in Content drinne steht anzeigen, ansonsten soll der Inhalt nicht angezeigt werden.

Hoffe das ist soweit verständlich.

VG

Zaine
0 Punkte
Beantwortet von computerschrat Profi (18.3k Punkte)
Hallo Zaine,

wenn ich deinen Seiteninhalt aus der Frage nehme und eine style.css mit dem Inhalt aus deiner Antwort dazulege, dann ist zwar der Inhalt der Aufzählung ausgeblendet, die Punkte vor den Listenelementen bleibt aber sichtbar. Im CSS hast du nur für die Inhalte die Sichtbarkeit abgeschaltet.

Ändere die Anweisung in der css in:
#Zeugnisse {
Display:none;
}

Dann ist die ganze Aufzählung ausgeblendet, Dann musst du noch das anzuklickende "Zeugnisse" vor das <section> ziehen, damit das immer sichtbar bleibt, sonst kann es keiner anklicken.
also:
<ul><li><a href="#Zeugnisse">Zeugnisse</li></ul>
<section id="Zeugnisse">
<div id="Content">
<ul><li><a href="#">Fachabitur1</a></li>
<li><a href="#">Fachabitur2</a></li>
<li><a href="#">Praktikumszeugnis1</a></li>
<li><a href="#">Praktikumszeugnis2</a></li>
</ul>
</div>
</a>
</ul>
</section>
</body>
</html>


Gruß
computerschrat
0 Punkte
Beantwortet von
Hallo computerschrat ,

Vielen Dank, dass habe ich soweit verstanden und umgesetzt.

Jetzt bleibt nur noch ein script was es mir ermöglicht bei einem klick auf Zeugnisse den Inhalt der Liste anzuzeigen. Oder war das script was ich vorher hatte geeignet dafür?

VG

Zaine
0 Punkte
Beantwortet von computerschrat Profi (18.3k Punkte)
Hallo Zaine,

lege auf den Eintrag "Zeugnisse" ein On-Click-Event:

<ul><li><a href="#Zeugnisse" onclick="ZeigeListe()">Zeugnisse</li></ul>


Die Funktion ZeigeListe die dann aufgerufen wird sieht so aus:
<script>
function ZeigeListe (){
$('#Zeugnisse').toggle();}
</script>


Gruß
computerschrat
0 Punkte
Beantwortet von
Hallo Computerschrat,

Vielen vielen Dank! :) das hat mein Problem gelöst.

VG

Zaine
0 Punkte
Beantwortet von computerschrat Profi (18.3k Punkte)
Hallo Zaine,

das freut mich. Dann weiterhin viel Erfolg.

Gruß
computerschrat
...