hi ihr,
ich bin neu hier im forum, und auch neu in JavaScript, und auch neu in JQuery.
(ich habe sufu genutzt aber bin auf kein entsprechendes Ergebnis gekommen, oder ich bin zu dumm zum suchen ^^)
so mein problem:
ich soll für den Kunden eine Art Farbfächer machen, die beim anklicken aufklappt.
ich hab dies auch soweit schon realisiert.
Jedoch
ich hatte vorher ein script geschrieben, dass mir beim anklicken vom kompletten DIV die klasse ändert.
jetzt will mein Kunde aber dass ich nur jeweils die "Überschrift" innerhalb des divs anklicke um weiterzublättern.
aber ich krieg das einfach nicht gebacken, und ich weiß nicht warum.
geht das nicht? oder ist im code etwas falsch??
(die "Fächer" sind noch im Aufbau und noch nicht wirklich gestaltet, die Farben dienen erstmal nur zur Identifizierung für mich selber ^^)
mir geht es lediglich nur darum:
Geht das oder geht das nicht?? bzw was habe ich falsch gemacht
Vielen Dank bereits im voraus
(der Code is angehängt)
Gruß Hoffy
ich bin neu hier im forum, und auch neu in JavaScript, und auch neu in JQuery.
(ich habe sufu genutzt aber bin auf kein entsprechendes Ergebnis gekommen, oder ich bin zu dumm zum suchen ^^)
so mein problem:
ich soll für den Kunden eine Art Farbfächer machen, die beim anklicken aufklappt.
ich hab dies auch soweit schon realisiert.
Jedoch
ich hatte vorher ein script geschrieben, dass mir beim anklicken vom kompletten DIV die klasse ändert.
jetzt will mein Kunde aber dass ich nur jeweils die "Überschrift" innerhalb des divs anklicke um weiterzublättern.
aber ich krieg das einfach nicht gebacken, und ich weiß nicht warum.
geht das nicht? oder ist im code etwas falsch??
(die "Fächer" sind noch im Aufbau und noch nicht wirklich gestaltet, die Farben dienen erstmal nur zur Identifizierung für mich selber ^^)
mir geht es lediglich nur darum:
Geht das oder geht das nicht?? bzw was habe ich falsch gemacht
Vielen Dank bereits im voraus
(der Code is angehängt)
Gruß Hoffy
Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="height=1024, width=768, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
<title>Farbfächer</title>
<script type="text/javascript" src="jquery-1.7.1min.js"></script>
<script type="text/javascript">
function (){
$("#popup01.header").click(function(){
if( $("#popup01").hasClass("G000") ) {
$("#popup01").removeClass("G000");
$("#popup01").addClass("G015");
}
else {
return;
}
});
};
</script>
<style>
@charset "UTF-8";
* { margin:0; padding:0 }
#wrapper { background:rgba(102,102,102,1); width:768px; height:1024px; }
#test { background:rgba(102,102,102,1); width:768px; height:1024px; }
#leiste { background:rgba(073,073,077,1); width:768px; height:57px; bottom:0; left:0; position:absolute; z-index:9999; }
.popups { position:absolute; display:block; width:200px; height:640px; bottom:57px; left:00px; -webkit-transform-origin: 80% 95%; text-decoration:none; }
.header { color:rgba(0,0,0,1); text-align:left; margin-top:35px; margin-left:35px; margin-right:35px; margin-bottom:15px; font-size:20px; height:75px; }
.bild { width:100%; min-height:200px; border:none; }
#popup01 { background:rgba(255,255,000,1); z-index:1300; }
#popup02 { background:rgba(255,000,255,1); z-index:1200; }
#popup03 { background:rgba(000,255,255,1); z-index:1100; }
#popup04 { background:rgba(255,000,000,1); z-index:1000; }
#popup05 { background:rgba(000,255,000,1); z-index:0900; }
#popup06 { background:rgba(000,000,255,1); z-index:0800; }
#popup07 { background:rgba(255,255,255,1); z-index:0700; }
.G000 { -webkit-transform:rotate(00deg); -webkit-transition-duration: 1s; }
.G015 { -webkit-transform:rotate(15deg); -webkit-transition-duration: 1s; }
.G030 { -webkit-transform:rotate(30deg); -webkit-transition-duration: 1s; }
.G045 { -webkit-transform:rotate(45deg); -webkit-transition-duration: 1s; }
.G060 { -webkit-transform:rotate(60deg); -webkit-transition-duration: 1s; }
.G075 { -webkit-transform:rotate(75deg); -webkit-transition-duration: 1s; }
.G090 { -webkit-transform:rotate(90deg); -webkit-transition-duration: 1s; }
</style>
</head>
<body>
<div id="wrapper">
<div id="popup01" class="G000 popups"><p class="header">Broschüren und Magazine</p> <a href="popup://PopUp01/open"><img class="bild" src="Gruppen/01.png" alt=""/></a></div>
<div id="popup02" class="G000 popups"><p class="header">Hardcover, Flyer und Ordner</p> <a href="popup://PopUp02/open"><img class="bild" src="Gruppen/02.png" alt=""/></a></div>
<div id="popup03" class="G000 popups"><p class="header">Mailings</p> <a href="popup://PopUp03/open"><img class="bild" src="Gruppen/03.png" alt=""/></a></div>
<div id="popup04" class="G000 popups"><p class="header">Poster und Wandplakate</p> <a href="popup://PopUp04/open"><img class="bild" src="Gruppen/04.png" alt=""/></a></div>
<div id="popup05" class="G000 popups"><p class="header">Karten</p> <a href="popup://PopUp05/open"><img class="bild" src="Gruppen/05.png" alt=""/></a></div>
<div id="popup06" class="G000 popups"><p class="header">Boxen</p> <a href="popup://PopUp06/open"><img class="bild" src="Gruppen/06.png" alt=""/></a></div>
<div id="popup07" class="G000 popups"><p class="header">Aufsteller</p> <a href="popup://PopUp07/open"><img class="bild" src="Gruppen/07.png" alt=""/></a></div>
<div id="leiste"></div>
</div>
</body>
</html>
