Supportnet Computer Supportnet Games Supportnet Kochen Explipedia
Login: guestBesucher online: 97
Supportnet Computerforum
SUPPORT
Home
Forum
Tipps & Infos
Blitz Angebote
Members
Hilfe
Video

TOP THEMEN
SSD Test
Alles über SSDs

Android Tipps
iPad Tipps
Google Tipps
Windows 8 FAQ
Windows 7 FAQ
E-Mail FAQ
Netzwerk FAQ
Festplatten FAQ
Datenrettung FAQ
Bildbearbeitung FAQ

Top iPhone Apps
Computer Einsteiger
Die 5 besten...
Explipedia
Themen
Direktlinks

Neue Einträge
News einsenden News einschicken
Tipps einsenden Tipp einschicken

SN-LINKS

Suche
Befreundete Seiten
Top Seiten

Supportnet/Forum/Webseiten/HTML



Supportnet/Forum/Webseiten/HTML
von Zaine vom 08.08.2017, 09:19 Diese Seite den Supportnet Favoriten hinzufügen  Mißbrauch, Beleidigungen und Blödsinn den Moderatoren melden


Div content per script anzeigen lassen

 (127 Hits)

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>


Antwort schreiben 50 Bonuspunkte

Antworten...
Antwort 1 von computerschrat vom 08.08.2017, 10:00 Mißbrauch, Beleidigungen und Blödsinn den Moderatoren melden

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


Antwort noch nicht bewertet Als gute Antwort bewerten
Antwort 2 von Zaine vom 08.08.2017, 10:09 Mißbrauch, Beleidigungen und Blödsinn den Moderatoren melden

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


Antwort noch nicht bewertet
Antwort 3 von computerschrat vom 09.08.2017, 10:31 Mißbrauch, Beleidigungen und Blödsinn den Moderatoren melden

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


Antwort noch nicht bewertet Als gute Antwort bewerten
Antwort 4 von Zaine vom 09.08.2017, 13:14 Mißbrauch, Beleidigungen und Blödsinn den Moderatoren melden

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


Antwort noch nicht bewertet
Antwort 5 von computerschrat vom 09.08.2017, 15:27 Mißbrauch, Beleidigungen und Blödsinn den Moderatoren melden

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


Antwort noch nicht bewertet Als gute Antwort bewerten
Diese Antwort hat das Problem gelöst!
Antwort 6 von Zaine vom 10.08.2017, 09:11 Mißbrauch, Beleidigungen und Blödsinn den Moderatoren melden

Hallo Computerschrat,

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

VG

Zaine


Antwort noch nicht bewertet
Antwort 7 von computerschrat vom 10.08.2017, 09:31 Mißbrauch, Beleidigungen und Blödsinn den Moderatoren melden

Hallo Zaine,

das freut mich. Dann weiterhin viel Erfolg.

Gruß
computerschrat


Antwort noch nicht bewertet Als gute Antwort bewerten




Antwort schreiben
    Bitte einen 'Nickname' wählen.
Nickname:*
    (eMail-Adresse wird nicht veröffentlicht.)
eMail:
Nachricht: Ich möchte bei Antworten benachrichtigt werden.
    Hilfe zur Beitragsformatierung gibts [hier]
                   
Antwort:*
  Die Nutzungsbedingungen habe ich gelesen und akzeptiert.

MACHEN SIE IHRE WEBSITE ATTRAKTIVER
Sie haben eine eigene Website und wollen Ihre Besucher auf den Supportnet-Service aufmerksam machen? Kopieren Sie einfach den Quellcode in Ihre Seite und jeder Besucher Ihrer Seite kann direkt auf die Supportnet-Datenbank zugreifen.

My Supportnet


SUCHE

Gruppen im Forum
Betriebsysteme
Software
Hardware
Netzwerk
Programmierung
Sonstiges

Impressum © 1997-2015 SupportNet
Version: supportware 1.8.230E / 18.10.2010, Startzeit:Mon Aug 21 21:20:21 2017