DIV1 blendet ein, DIV2 blendet aus

nordi

nordi

Erfahrenes Mitglied
Hallo,

Probem/Frage ist schnell beschrieben. Ich lass eine ein DIV-Container via jQUERY einfaden. Über folgende Funktion wird das DIV eingeblendet:

Code: 
$.fade = function(query)
{
if ($(query).css('display') == 'block') {
$(query).fadeOut(100);
} else {
$(query).fadeIn(400);
}
} 

// Link1 ist wie folgt:
<a href="javascript:$.fade('div.haftung')" class="haftung">link1</a>
//Link2 so:
<a href="javascript:$.fade('div.mail')" class="mail">link2</a>

Wenn ich jetzt ein zweiten DIV-Container einfaden lassen will, soll der jetzige (bereits geöffnet) wieder ausfaden. Ich weiß leider nicht genau, wie ich das machen soll.

Bin für Tipps sehr dankbar!
 
Hi,
wodurch wird den das erste Div eingeblendet bzw. das zweite? Wird da für auf einen Link geklickt?

Ich hab das hier mal grad erstellt, vielleicht hilfts ja, auch wenns nicht ganz perfekt ist:
Code: 
<html>
	<head>
		<title></title>
		<style type="text/css">
<!--
#zwei, #eins
{
background-color: #000;
border:5px solid yellow;
width: 150px;
height: 150px;
display: none; 
}

#eins
{
border:5px solid red;
display: none; 
}

p
{
color: #fff;
}
-->
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function() {
 	
  	
<script language="javascript">
$(document).ready(function() {
 	
  	
  	$('#link1').click(function () {
	  $('#zwei').hide('slow', function(){
	  	$('#eins').show('slow');
	  });
	});


  	$('#link2').click(function () {
	  $('#eins').hide('slow', function(){
	  	$('#zwei').show('slow'); 
	  });
  	});

});
</script>

});
</script>		
	</head>
	<body>
	<div id="eins"><p>DIV#eins</p></div>
	<div id="zwei"><p>DIV#zwei</p></div>
<a href="#" id="link1">link1</a>
<a href="#" id="link2">link2</a>
	</body>
</html>

Viele Grüße
 
Zuletzt bearbeitet:
Hi, vielen Dank! Das klappt schonmal super! Wie kann ich dem Link id="link1" und id="link2" noch zuweisen, dass der DIV-Container auch ausgefadet wird, wenn man nochmal draufklickt. Also: Klick 1 = Fadet ein, erneuter Klick = fadet wieder aus.
 
Hi,
dafür kannst du die Klasse .toggle verwenden.
Diese macht nichts anderes als das was du eigentlich am Anfang geschrieben hast. Ist also ein Shortcut dafür:
Javascript: 
if (showOrHide) {
  $('#eins').show();
} else {
  $('#zwei').hide();
}

Javascript: 
<script language="javascript">
$(document).ready(function() {
	
  	$('#link1').click(function () {
		$('#eins').toggle('slow', function(){
			$('#zwei').hide('slow');
		});
	});    
  	
	$('#link2').click(function () {
		$('#zwei').toggle('slow', function(){
			$('#eins').hide('slow');
		});
	});

});
</script>
 
Hi, ja hatte auch da an toggle gedacht, aber ich würde das gerne mit dem fadeIn/fadeOut kombinieren. Habe irgendwo gelesen, dass jQuery das von Haus aus nicht kombiniert? Habe dann mit deinem Skript das hier gemacht:

Code: 
<script language="javascript">
$(document).ready(function() {
    
    $('#link1').click(function () {
        $('#eins').toggle().fadeIn('slow', function(){
            $('#zwei').fadeOut('slow');
        });
    });    
    
    $('#link2').click(function () {
        $('#zwei').toggle().fadeIn('slow', function(){
            $('#eins').fadeOut('slow');
        });
    });
 
});
</script>

Das Hin-und-Her wechseln zwischen den zwei DIV-Container funktioniert auch, aber das Ausfaden bei dem erneuten Klick geht nicht? Kann man das Skript so erweitern oder ist da was falsch dran?
 
Hi,

du kannst DIV und zugehörigen Link über ein Suffix miteinander kombinieren. Damit wird das Script flexibler, falls es irgendwann auf mehrere Elemente angewendet werden soll.

Das Toggeln kannst du über den Pseudo-Selektor :hidden realisieren.

Das folgende kommentierte Beispiel zeigt die von mir vorgeschlagene Vorgehensweise:
Code: 
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
  <!--
.fadeDiv{
  width: 200px;
  height: 200px;
  background: #369;
  border: 3px double #000;
  display: none;
}
 //-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
  <!--
$(function(){
  $('.fadeLink').bind('click.qpNameSpace', function(evt){
    evt.preventDefault();
    // Über Suffix die ID des DIVs generieren und Objekt referenzieren
    var $objDiv = $('#div_' + $(this).attr('id').split("_")[$(this).attr('id').split("_").length-1]);

    // DIVs durchlaufen, die ein- bzw. ausgefadet werden sollen
    $('.fadeDiv').each(function(i){
      // Falls es sich nicht um das zum Link gehörige DIV handelt -> ausfaden
      if($(this)[0] != $objDiv[0]){
        $(this).fadeOut();
      // Falls es sich um das zum Link gehörige DIV handelt
      }else{
      	// Falls das DIV versteckt ist, einfaden - sonst ausfaden
      	($(this).is(':hidden'))? $(this).fadeIn() : $(this).fadeOut();
      }
    });
  });
});
 //-->
</script>
</head>
<body>
<a href="#" id="fade_id_01" class="fadeLink">fade DIV 1</a>
<a href="#" id="fade_id_02" class="fadeLink">fade DIV 2</a>
<div class="fadeDiv" id="div_01">DIV 1</div>
<div class="fadeDiv" id="div_02">DIV 2</div>
</body>
</html>
Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück