20.12.2010, 17:47
|
|||
|
|||
Slidedown mit 2 Boxen
Hallo xhtmlforum User,
mein Problem ist folgendes, ich habe 2 DIV Boxen. Beide haben eine Id und eine Klasse. Folgendes habe ich realisiert bis jetzt: Klicke ich auf einen Link färt die Entsprechende Box (slidedown) nach unten. Code:
$("a#idBox1").click(function(event){$("div#Box1").slideDown('slow');
});
Jetzt das Problem, ist Box 1 ausgefahren und ich klicke auf den Link für Box 2 soll Box 1 verschwinden und dann soll erst Box 2 kommen und umgekehrt, wie realisiere ich das? Grüße, Skip 
|
| Sponsored Links |
|
20.12.2010, 19:13
|
||||
|
||||
|
Ist das ganze für eine Navigation? Ein wenig mehr Input/Code wär da schon angebracht...
Ansonsten .slideUp() ?
__________________
XHTML-Valid-Websites.com | CookielessDomain.com | Stop-Supporting-IE6.com if (browser == IE) { sucks(big); } else { nice(site); }
|
| Sponsored Links |
|
21.12.2010, 09:17
|
|||
|
|||
|
alright. hier mal der link der das problem verdeutlicht.
test box Klicke ich auf Link1 fährt die Box1 raus. Klicke ich auf Link2 fährt die Box2 raus. Right. Beispiel. Box1 ist ausgefahren und ich klicke auf Link2 soll die Box1 verschwinden und dann erst die Box2 gezeigt werden und umgekehrt. Ein Toggle würde das Problem nicht lösen soweit ich das weis. Probiert habe ich schon folgendes: Code:
$("a#link1").click(function(event) {
var box1 = '0'; /* 0 = geschlossen */
if (box1 == '0') {
$("#box1").slideDown('slow');
box1 = '1'; /* 1 = offen */
} else if (box== '1') {
$("#box1").slideUp('slow');
}
});
$("a#link2").click(function(event) {
var box2 = '0';
if (box1== '1') {
$("#box2).slideUp('slow');
freundebox = '0';
$("#box2").slideDown('slow');
} else if (box2 == '1') {
$("#box2").slideUp('slow');
} else if (box2 == '0') {
$("#box2").slideDown('slow');
}
});
|
|
21.12.2010, 11:01
|
||||
|
||||
|
Hallo.
Mir fällt grad nur etwas wie dieses hier ein: jQuery Code:
$(document).ready(function(){
$("ul#menulist li").click(function () {
$(this, "ul").find("div.inactive").fadeIn('fast').addClass("active");
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("div.active").slideUp('slow').removeClass("active").addClass("inactive"); //When the mouse hovers out of the subnav, move it back up
});
});
});
Code:
* {margin:0;padding:0;}
body {width:960px;height:100%;margin:10px;}
ul#menulist li {float:left;list-style-type:none;width:100px;margin-left:10px;background:#ddd;}
div#box1,
div#box2 {
width:400px;
display:none;
}
div#box1 {
position:absolute;
width:200px;
height:200px;
background-color:red;
}
div#box2 {
position:absolute;
width:200px;
height:400px;
background-color:blue;
}
#content {
width:960px;
height:320px;
}
.clear {
clear: both;
height: 1px;
}
Code:
<ul id="menulist"> <li><a href="#" id="link1">Link1</a> <div id="box1" class="inactive"></div> </li> <li><a href="#" id="link2">Link2</a> <div id="box2" class="inactive"></div> </li> </ul> <div class="clear"></div> <div id="content"> blub blub bla bla content usw. </div>  Muss es unbedingt mit Click sein? Wofür ist es gedacht? Navigation?
__________________
XHTML-Valid-Websites.com | CookielessDomain.com | Stop-Supporting-IE6.com if (browser == IE) { sucks(big); } else { nice(site); } Geändert von XHTMLvalid (21.12.2010 um 11:07 Uhr)
|
|
21.12.2010, 20:03
|
||||
|
||||
|
Hier mal wie ich es lösen würde (stolz auf die Menge an JS Code
)HTML-Code:
<a href="#" class="link" rel="box1">Link1</a> <a href="#" class="link" rel="box2">Link2</a> <div class="box" id="box1"></div> <div class="box" id="box2"></div> Code:
$(document).ready(function(){
$('.link').click(function(){
$('.box:visible').slideUp('fast');
$id = $(this).attr('rel');
$('#'+$id).slideDown('fast');
return false;
});
});
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
|
|
29.12.2010, 18:48
|
||||
|
||||
|
Um die Box wieder zu schließen bei einem erneuten Klick auf den Link folgenden Code nutzen:
Code:
$(document).ready(function(){
$('.link').click(function(){
$('.box:visible').slideUp('fast');
$id = $(this).attr('rel');
$('#'+$id).slideDown('fast');
return false;
});
});
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Dingend Hilfe benötigt bei CSS Boxen für eine Wetterseite! | Web4Live | CSS | 2 | 13.07.2011 16:01 |
| Mitwachsende Container: 4 Boxen | Cu Chullain | CSS | 1 | 08.09.2010 18:57 |
| Nebeneinanderliegende gleichhohe Boxen | mantiz | CSS | 13 | 08.02.2010 00:13 |
| Boxen beim Seitenladen zuklappen (ohne "Flackern") | Plasm | Javascript & Ajax | 5 | 08.01.2010 16:42 |
| Gleiche Abstände zwischen Boxen? | Shepstar | CSS | 5 | 29.07.2006 03:37 |
Linear-Darstellung
