dwex
Erfahrenes Mitglied
Hallo Leute,
ich habe mir, da ich ja von JavaScript nicht so die Ahnung habe in den letzten 2 Stunden ein "Script" gebastelt was auch funktioniert - jedoch für meine Zwecke noch nicht optimal ist.
Mein Problem ist, dass ich das ganze toogle mit ändern des Stylsheets nicht nur für 3 sondern für knapp 40 Einträge brauche - und dann wird der Quellcode doch etwas unübersichtlich und fehleranfällig.
Das Ganze soll wie Ihre sehen könnt mehrere Punkt in der Farbe rot ausgeben und jeweils nur ein Element einblenden und beim klick auf ein anderes das vorherige wieder ausblenden. Ausserdem soll das jeweils eingeblendete Element (also der Link davon) die Farbe in grün ändern.
Folgendes habe ich:
Meine Frage nun:
Kann ich das ganze kürzen sodass ich nicht für jede Eventualität einen eigenen Click-Event (sagt man das so) schreiben muss?
Was mir noch aufgefallen ist:
Wenn man einen geöffneten Link erneut klickt dann wird der toggle wieder geschlossen - die Farbe bleibt jedoch auf grün.
Kann man da auch noch entgegenwirken?
Vielen Dank für euere Hilfe im voraus!
ich habe mir, da ich ja von JavaScript nicht so die Ahnung habe in den letzten 2 Stunden ein "Script" gebastelt was auch funktioniert - jedoch für meine Zwecke noch nicht optimal ist.
Mein Problem ist, dass ich das ganze toogle mit ändern des Stylsheets nicht nur für 3 sondern für knapp 40 Einträge brauche - und dann wird der Quellcode doch etwas unübersichtlich und fehleranfällig.
Das Ganze soll wie Ihre sehen könnt mehrere Punkt in der Farbe rot ausgeben und jeweils nur ein Element einblenden und beim klick auf ein anderes das vorherige wieder ausblenden. Ausserdem soll das jeweils eingeblendete Element (also der Link davon) die Farbe in grün ändern.
Folgendes habe ich:
HTML:
<!DOCTYPE HTML>
<html lang="de-DE">
<head>
<meta charset="UTF-8">
<title>toogle-Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#link1').click(function () {
$('#eins').toggle('fast', function(){
$('#zwei').hide('fast');
$('#link2').css('color','red');
$('#drei').hide('fast');
$('#link3').css('color','red');
});
$('#link1').css('color','green');
});
$('#link2').click(function () {
$('#zwei').toggle('fast', function(){
$('#eins').hide('fast');
$('#link1').css('color','red');
$('#drei').hide('fast');
$('#link3').css('color','red');
});
$('#link2').css('color','green');
});
$('#link3').click(function () {
$('#drei').toggle('fast', function(){
$('#eins').hide('fast');
$('#link1').css('color','red');
$('#zwei').hide('fast');
$('#link2').css('color','red');
});
$('#link3').css('color','green');
});
});
</script>
<style type="text/css">
.normal {
color: red;
text-decoration: none;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div id="demo">
<a href="#" id="link1" class="normal">Erster Punkt</a>
<div id="eins" class="hidden">Das ist der Text zum ersten Punkt.</div><br>
<a href="#" id="link2" class="normal">Zweiter Punkt</a>
<div id="zwei" class="hidden">Das ist der Text zum zweiten Punkt</div><br>
<a href="#" id="link3" class="normal">Dritter Punkt</a>
<div id="drei" class="hidden">Das ist der Text zum dritten Punkt</div>
</div>
</body>
</html>Meine Frage nun:
Kann ich das ganze kürzen sodass ich nicht für jede Eventualität einen eigenen Click-Event (sagt man das so) schreiben muss?
Was mir noch aufgefallen ist:
Wenn man einen geöffneten Link erneut klickt dann wird der toggle wieder geschlossen - die Farbe bleibt jedoch auf grün.
Kann man da auch noch entgegenwirken?
Vielen Dank für euere Hilfe im voraus!
Zuletzt bearbeitet:
