Einen Div einblenden und restlichen ausblenden.

S

spikaner

Quereinsteiger @ php
Ich habe mehrere Div id1-8, diese sollen peer Button ein-ausgeblendet werden und zwar
bei klick auf
<a href="#" onclick="anzeigen('id1')"></a> soll nur id1 angezeigt werden 2-8 ausgeblendet, bei klick auf 2 soll nur 2 angezeigt werden usw.
Und am besten soll der geklickte Button selbst auch noch ausgeblendet werden.

Wie kann ich das bewerkstelligen?

mfg Spikaner
 
Hast du jetzt einen Button mit welchem du ein- und ausblenden willst oder geschieht dies durch den Link/die Links?

Und wenn der Button/der Link auch ausgeblendet wird, wie kann man ihn dann wieder einblenden?

Dritte und letzte Frage: hast du schon selber was versucht und kannst du uns deinen aktuellen Versuch zeigen?
 
Ich habe bis jetzt nur normales ein ausblenden
Code: 
<script type="text/javascript">
jQuery(document).ready(function() {
     jQuery('#anzeigen').click(function() {
         jQuery('#test').fadeIn('slow');
     });
     jQuery('#verstecken').click(function() {
         jQuery('#test').fadeOut('slow');
     });
});
</script>
HTML: 
<input id="anzeigen" type="button" value="Einblenden" />
<input id="verstecken" type="button" value="Ausblenden" />
<div id="test" style="width: 100%; height: 200px; background: #ffffff;"></div>
jetzt will ich es "Dynamischer" machen. bei klick auf link 1 soll wenn möglich Inhalt link 1 und Links 2 - 8 angezeigt werden.
bei klick auf z.B. Link 4 sollen Inhalt Link 4 und Link 1-3 und 5-8 angezeigt werden.

bräuchte da nen Hilfe ansatz wie ich erst wieder alle "verstecken" kann und dann den gewünschten Anzeigen lassen kann, so das der Button ausblenden ganz weg fällt.

mfg Spikaner
 
Bin jetzt auf etwas gestosen

HTML: 
<html>

<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<title>Marktpreise Eve-Online v.0.3 by gawebe.de</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script type="text/javascript">
var angeschaltet = 0;
function anzeigen(das){
 if(angeschaltet != 0)
  document.getElementById(angeschaltet).style.display='none';
 if(document.getElementById(das).style.display=='none')
  document.getElementById(das).style.display='block';
 else
  document.getElementById(das).style.display='none';
 angeschaltet= das;
}



function hide($id){
 $div = document.getElementById($id);
 $div.style.display = 'none';
}

function show($id){
 $div = document.getElementById($id);
 $div.style.display = 'block';
}

</script>
</head>
<body>


<div id="figur">

                         <div id="navi_atemwege"><a href="javascript:void(0);" onclick="anzeigen('textbox_atemwege')">laaa</a>
                         </div>

                         <div id="navi_bauch"><a href="javascript:void(0);" onclick="anzeigen('textbox_bauch')">leeee</a>
                         </div>

                         <div id="navi_herz"><a href="javascript:void(0);" onclick="anzeigen('textbox_herz')">luuu</a>
                         </div>

                         <div id="textbox_atemwege" style="display: none;">

                                 <div class="textbox_head">Atemwege <a href="javascript:void(0);" onclick="hide('textbox_atemwege')"><span style="font-size:10px;"> (Schlie&szlig;en)</span></a></div>
                                 <div class="textbox_content">
  buuuuuhhhhh<br>
                                 </div>
                         </div>

                         <div id="textbox_herz" style="display: none;">

                                 <div class="textbox_head">Herz <a href="javascript:void(0);" onclick="hide('textbox_herz')"><span style="font-size:10px;"> (Schlie&szlig;en)</span></a></div>
                                 <div class="textbox_content">
 baaaahhhhhhhh<br>
                                 </div>
                         </div>

                                 <div id="textbox_bauch" style="display: none;">

                                 <div class="textbox_head">Bauch <a href="javascript:void(0);" onclick="hide('textbox_bauch')"><span style="font-size:10px;">(Schlie&szlig;en)</span></a></div>
                                 <div class="textbox_content">
 bääääähhhhhhhhh<br>
                                 </div>
                         </div>
</body>
</html>

jetzt die große frage ist es möglich die DIV`s erst bei "klick" zu laden ohne ein aktuallisieren der Seite ? So ähnlich wie bei Facebook z.B. ?

mfg Spikaner
 
Also ich würde bei der Lösung mit jQuery bleiben. Ist doch viel schöner, wenn die divs schön ein- und ausgeblendet werden. Gib allen divs dieselbe Klasse, dann kannst Du sie alle mit einem Befehl ansprechen und ausblenden. Anschließend dann das eine einblenden.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück