| HereWeGoAgain |
07.04.2014 11:29:55 |
Javascript Buttons
Hallo Zusammen,
ich komme mal gleich zur Sache: Ich möchte eine Anfänger-Game-Review-Seite proggen, dass folgendes machen soll: Es sind alle Buchstaben des Alphabets aufgelistet. Wenn man nun ein Alphabet anklickt, sollen die jeweiligen Spiele aufgelistet werden. Hier gibts allerdings zwei Probleme über die ich mir seit 2 Tagen den Kopf zerreisse. Wenn man einen Buchstaben anklickt kommen die Spiele, dabei verändert sich dieser Buchstaben in "Verstecken" und wenn man auf den Button wieder anklickt, verschwinden die Spiele und dieser Button geht wieder in die Ausgangssituation! Für den Buchstaben "A" klappt es, aber nicht für die anderen. Also ganz konkret: wenn ich auf "B" klicke, kommen zwar die Namen und der Button aendert sich auf "Verstecken" aber wenn ich nochmal drauf klicke, wird daraus nicht "B" sondern "A". Weiss da jmnd was ich falsch mache?
Hier ist der Code:
<!-- Code von der Homepage -->
HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<title> ISAPlay </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src ="javascriptA.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="decription" content="Hier wird HTML getestet">
<meta name="author" content="Alexander, Ibrahim, Sahin">
<meta name="copyright" content="Copyright 2014 Alexander, Ibrahim, Sahin">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slider').cycle({
fx: 'scrollLeft'
});
});
</script>
</head>
<body>
<div id="website">
<div id="top_part">
<div id="head">
</div>
<div id="menu">
<ul id="nav">
<li><a href="index.html" title="#">Hauptseite</a></li>
<li><a href="#" title="#">Game & Übersicht</a></li>
<li><a href="login.html" title="#">Anmelden</a></li>
<li><a href="kontroll.html" title="#">Kontrollzentrum</a></li>
<li><input type="button" value="Suchen:" onclick = "window.location= 'SucheFehlgeschlagen.html';"></li>
<li><input name="suche" type="text"></li>
</ul>
</div>
</div>
<div id="middle_part">
<div id="banner">
<p> hier könnte Ihre Werbung stehen!!</p>
</div>
<div id ="main_site">
<div class="slider">
<a href="ds.html" title="#"><img src="image/ds.gif" alt="image" /></a>
<img src="image/ac4.gif" alt="image" />
</div>
<div id="main">
<p>
<div class="pre-spoiler">
<input name="Button" type="button" value="A">
<input name="Button" type="button" value="B">
<input name="Button" type="button" value="C">
<input name="Button" type="button" value="D">
<input name="Button" type="button" value="E">
<input name="Button" type="button" value="F">
<input name="Button" type="button" value="G">
<input name="Button" type="button" value="H">
<input name="Button" type="button" value="I">
<input name="Button" type="button" value="J">
<input name="Button" type="button" value="K">
<input name="Button" type="button" value="L">
<input name="Button" type="button" value="M">
<input name="Button" type="button" value="N">
<input name="Button" type="button" value="O">
<input name="Button" type="button" value="P">
<input name="Button" type="button" value="Q">
<input name="Button" type="button" value="R">
<input name="Button" type="button" value="S">
<input name="Button" type="button" value="T">
<input name="Button" type="button" value="U">
<input name="Button" type="button" value="V">
<br></br>
<input name="Button" type="button" value="W">
<input name="Button" type="button" value="X">
<input name="Button" type="button" value="Y">
<input name="Button" type="button" value="Z">
<div class="spoiler" style="display: none;"><a href="ds.html"></a>
<br> </br>
<br>Assassins Creed IV
<br>Arcane Codex
<br> Ars Magica
<br> </br>
<br>Birthright
<br>Bushido
<br> Big Eyes, Small Mouth
</div>
</div>
</div>
</p>
</div>
</div>
</div>
<div id ="foot">
<a href="./Impressum/Impressum.html" title="#">Impressum</a>
</div>
</div>
</body>
</html>
<!-- Hier ist der Code von Javascript -->
HTML-Code:
/* <![CDATA[ */
$(document).ready(function(){
var zuklapptext = "Verstecken";
var aufklapptext = "A";
$(".pre-spoiler").children("input").toggle(
function(){
this.value = zuklapptext;
$(this).parent().children(".spoiler").first().slideDown();
}, function(){
this.value = aufklapptext;
$(this).parent().children(".spoiler").first().slideUp();
});
});
/* ]]> */
|