mehre div layer einblenen und ausblenden


 
Neues Thema eröffnen   Neue Antwort erstellen    Webmaster Forum -> Hilfe für Webmaster -> CSS
Vorheriges Thema anzeigen :: Nächstes Thema anzeigen  
Autor Nachricht
vayu
Mitglied

Beitragmehre div layer einblenen und ausblenden Antworten mit Zitat

ich bin nicht so gut in javascript und hab versucht für eine Seite mit 2 scripten zu experimentieren.

Über einen Button faden 2 Div Layer ein. In dem oberen Div Layer sind wiederum vier button.

durch klicken faded jeweils ein div layer ein aber der offne layer ohne button fadet aus.

Nun zu meinem Problem: der Inhalt ohne Style wird wird von den 4 Layern schon vorher angezeigt. Nachdem aber die beiden ersten Layer einfaden rücken diese Sichtbar nach unten und die beiden Layer faden gewünscht ein.
Die vier Button funktionieren nur teilweise und übernehmen den style nicht.

Hat jemand eine Idee was ich im CSS, Javascript falsch gemacht habe?


CSS:
Code:
#subcontent {
   position: relative;
   float: left;
   width: 636px;
   border-top: 1px dashed #695d54;
   padding: 0px;
   height: auto;
   margin-top: 18px;
   margin-bottom: 100px;
   font-family: Helvetica, Arial, sans-serif;
   font-size: 12px;
   color: #000;
   background: #EEE;   
   display:none;
}

#1 {
   position: relative;
   float: left;
   width: 636px;
   border-top: 1px dashed #695d54;
   padding: 0px;
   height: auto;
   margin-top: 18px;
   margin-bottom: 100px;
   font-family: Helvetica, Arial, sans-serif;
   font-size: 12px;
   color: #000;
background: #EEE;
   background-color: #A00;
   display:none;
}

#2 {
   position: relative;
   float: left;
   width: 636px;
   border-top: 1px dashed #695d54;
   padding: 0px;
   height: auto;
   margin-top: 18px;
   margin-bottom: 100px;
   font-family: Helvetica, Arial, sans-serif;
   font-size: 12px;
   color: #000;
background: #EEE;
   background: #3C0;
   display:none;
}

#3 {
   position: relative;
   float: left;
   width: 636px;
   border-top: 1px dashed #695d54;
   padding: 0px;
   height: auto;
   margin-top: 18px;
   margin-bottom: 100px;
   font-family: Helvetica, Arial, sans-serif;
   font-size: 12px;
   color: #000;
background: #EEE;   
   display:none;
}

#4 {
   position: relative;
   float: left;
   width: 636px;
   border-top: 1px dashed #695d54;
   padding: 0px;
   height: auto;
   margin-top: 18px;
   margin-bottom: 100px;
   font-family: Helvetica, Arial, sans-serif;
   font-size: 12px;
   color: #000;
background: #EEE;   
   display:none;
}


Javascript:
Code:
   <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;
}
</script> 

$(function(){
   $("a#fadeout").click(function(){
      $("#contentohne").fadeOut(1000);
   });
   $("a#fadein").click(function(){
      $("#contentohne").fadeIn(1000);
   });
   $("a#fadeout").click(function(){
      $("#content").fadeOut(1000);
   });
   $("a#fadein").click(function(){
      $("#content").fadeIn(1000);
   });
      $("a#fadeout").click(function(){
      $("#bcontent").fadeOut(1000);
   });
   $("a#fadein").click(function(){
      $("#bcontent").fadeIn(1000);
   });
      $("a#fadeout").click(function(){
      $("#ccontent").fadeOut(1000);
   });
   $("a#fadein").click(function(){
      $("#ccontent").fadeIn(1000);
   });
      $("a#fadeout").click(function(){
      $("#dcontent").fadeOut(1000);
   });
   $("a#fadein").click(function(){
      $("#dcontent").fadeIn(1000);
   });
      $("a#fadeout").click(function(){
      $("#econtent").fadeOut(1000);
   });
   $("a#fadein").click(function(){
      $("#econtent").fadeIn(1000);
   });
   $("a#fadeout").click(function(){
      $("#subcontent").fadeOut(5000);
   });
   $("a#fadein").click(function(){
      $("#subcontent").fadeIn(5000);
   });
   $("a#fadeout").click(function(){
      $("#contentkontakt").fadeOut(5000);
   });
   $("a#fadein").click(function(){
      $("#contentkontakt").fadeIn(5000);
   });
});


HTML (+Loop von Wordpress)
Code:
<div class="inhaltsbox">
<div id="content">
   
      <div class="spalterechts">
           <a href="#" onclick="anzeigen('1')">
 
       
    <?php if (have_posts()) : ?>
     <?php $do_not_duplicate = array(); ?>
     <?php
       while ( have_posts() ) : the_post();
       $do_not_duplicate[] = get_the_ID();
     ?>
   
   <?php the_content(''); ?>
    <?php endwhile; ?>
      
   <?php
      $random_query = new WP_Query(array(
      'post__not_in' => $do_not_duplicate,
      'showposts' => 10,
      'orderby' => 'rand',
      'cat' => '98'
      ));
      while ($random_query->have_posts()) : $random_query->the_post(); ?>
     <div class="fuerhead"><strong><?php the_title(); ?></strong></div>       

     <?php the_content(''); ?>
     <?php endwhile; ?>
     
           </a><!-- ende a tag 1 -->
</div><!-- ende spalterechts 1 -->
        
       
     
      <div class="spalterechts">
         <a href="#" onclick="anzeigen('2')">
         
     <?php
      $random_query = new WP_Query(array(
      'post__not_in' => $do_not_duplicate,
      'showposts' => 10,
      'orderby' => 'rand',
      'cat' => '99'
      ));
      while ($random_query->have_posts()) : $random_query->the_post(); ?>
     <div class="fuerhead"><strong><?php the_title(); ?></strong></div>       

     <?php the_content(''); ?>
     <?php endwhile; ?>
     
           </a><!-- ende a tag 2 -->
</div><!-- ende spalterechts 2 -->
     
     
     
      <div class="spalterechts">
            <a href="#" onclick="anzeigen('3')">
     
     <?php
      $random_query = new WP_Query(array(
      'post__not_in' => $do_not_duplicate,
      'showposts' => 10,
      'orderby' => 'rand',
      'cat' => '100'
      ));
      while ($random_query->have_posts()) : $random_query->the_post(); ?>
     <div class="fuerhead"><strong><?php the_title(); ?></strong></div>       

     <?php the_content(''); ?>
     <?php endwhile; ?>
     
     
        </a><!-- ende a tag 3 -->
</div><!-- ende spalterechts 3 -->
     
     
     
     <div class="spaltelinks">
           <a href="#" onclick="anzeigen('4')">
   
    <?php
      $random_query = new WP_Query(array(
      'post__not_in' => $do_not_duplicate,
      'showposts' => 10,
      'orderby' => 'rand',
      'cat' => '101'
      ));
      while ($random_query->have_posts()) : $random_query->the_post(); ?>
     <div class="fuerhead"><strong><?php the_title(); ?></strong></div>       

     <?php the_content(''); ?>
     <?php endwhile; ?>
     
       </a><!-- ende a tag 4 -->
</div><!-- ende spaltelinks 4 -->
</div><!-- ende content rechts -->

 


         <div id="subcontent">
               <div id="1">
               <div class="sub_texte">

<?php
      $random_query = new WP_Query(array(
      'post__not_in' => $do_not_duplicate,
      'showposts' => 10,
      'orderby' => 'rand',
      'cat' => '87'
      ));
      while ($random_query->have_posts()) : $random_query->the_post(); ?>
      
        <h2><?php the_title(); ?></h2>
         <?php the_content(''); ?>
         <?php endwhile; ?>
   
            </div><!-- ende sub_texte -->
   
   <div class="pdfbreich">
   
<?php
      $random_query = new WP_Query(array(
      'post__not_in' => $do_not_duplicate,
      'showposts' => 10,
      'orderby' => 'rand',
      'cat' => '91'
      ));
      while ($random_query->have_posts()) : $random_query->the_post(); ?>

   <?php the_content(''); ?>
    <?php endwhile; ?>

       </div><!-- ende pdfbereich -->
          </div><!-- ende subcontent -->
             </div><!-- ende 1 -->

   
   
       <div id="subcontent">
               <div id="2">
               <div class="sub_texte">

<?php
      $random_query = new WP_Query(array(
      'post__not_in' => $do_not_duplicate,
      'showposts' => 10,
      'orderby' => 'rand',
      'cat' => '88'
      ));
      while ($random_query->have_posts()) : $random_query->the_post(); ?>
      
        <h2><?php the_title(); ?></h2>
         <?php the_content(''); ?>
         <?php endwhile; ?>
   
            </div><!-- ende sub_texte -->
   
   <div class="pdfbreich">
   
<?php
      $random_query = new WP_Query(array(
      'post__not_in' => $do_not_duplicate,
      'showposts' => 10,
      'orderby' => 'rand',
      'cat' => '92'
      ));
      while ($random_query->have_posts()) : $random_query->the_post(); ?>

   <?php the_content(''); ?>
    <?php endwhile; ?>

       </div><!-- ende pdfbereich -->
          </div><!-- ende subcontent -->
             </div><!-- ende 2 --> 

   




   
               <div id="3">
               <div class="sub_texte">

<?php
      $random_query = new WP_Query(array(
      'post__not_in' => $do_not_duplicate,
      'showposts' => 10,
      'orderby' => 'rand',
      'cat' => '89'
      ));
      while ($random_query->have_posts()) : $random_query->the_post(); ?>
      
        <h2><?php the_title(); ?></h2>
         <?php the_content(''); ?>
         <?php endwhile; ?>
   
            </div><!-- ende sub_texte -->
   
   <div class="pdfbreich">
   
<?php
      $random_query = new WP_Query(array(
      'post__not_in' => $do_not_duplicate,
      'showposts' => 10,
      'orderby' => 'rand',
      'cat' => '93'
      ));
      while ($random_query->have_posts()) : $random_query->the_post(); ?>

   <?php the_content(''); ?>
    <?php endwhile; ?>

       </div><!-- ende pdfbereich -->
             </div><!-- ende 3 -->     
   
     
   
   
      
               <div id="4">
               <div class="sub_texte">

<?php
      $random_query = new WP_Query(array(
      'post__not_in' => $do_not_duplicate,
      'showposts' => 10,
      'orderby' => 'rand',
      'cat' => '90'
      ));
      while ($random_query->have_posts()) : $random_query->the_post(); ?>
      
        <h2><?php the_title(); ?></h2>
         <?php the_content(''); ?>
         <?php endwhile; ?>
   
            </div><!-- ende sub_texte -->
   
   <div class="pdfbreich">
   
<?php
      $random_query = new WP_Query(array(
      'post__not_in' => $do_not_duplicate,
      'showposts' => 10,
      'orderby' => 'rand',
      'cat' => '94'
      ));
      while ($random_query->have_posts()) : $random_query->the_post(); ?>

   <?php the_content(''); ?>
    <?php endwhile; ?><?php endif; ?>

       </div><!-- ende pdfbereich -->
             </div><!-- ende 4 --> 
   
02 Mai 2010 03:59
Benutzer-Profile anzeigen Private Nachricht senden
vayu
Mitglied

Beitragnun klappt das ansteuern nur nicht das einfaden Antworten mit Zitat

Ich habe das Problem gelöst.

Ich habe das CSS geändert. jedes div concept1,concept2...... und dann eine classe die Container heißt und alle styling infos beinhaltet.

Das Javascript habe ich wie folgt geändert
Code:

 <script type="text/javascript">
var angeschaltet = "alex";
function anzeigen(concept_div){ $(".container").css('display', 'none'); $('#concept' + concept_div).css('display', 'block'); angezeigt = concept_div;}
</script> 


Leider weiss ich nicht, wie ich das ein und ausfaden hinbekomme
Ich hätte diese Funktion, die alleine auch läuft aber weiss nicht wie ich diese integrieren kann.

hat jm ne idee?

Code:
   $("a#fadeout").click(function(){
      $("#concept1").fadeOut(5000);
   });
   $("a#fadein").click(function(){
      $("#concept1").fadeIn(5000);
02 Mai 2010 16:49
Benutzer-Profile anzeigen Private Nachricht senden
axinio Internet Marketing
Beiträge der letzten Zeit anzeigen:   
Neues Thema eröffnen   Neue Antwort erstellen    Webmaster Forum -> Hilfe für Webmaster -> CSS Alle Zeiten sind GMT + 1 Stunde
Seite 1 von 1

 
Gehe zu:  

Ähnliche Beiträge
Thema Webmaster Forum Antw. Autor Verfasst am
Keine neuen Beiträge Div - Layer aus einem iframe mit Link... Javascript 1 Geiseltaler 02 März 2011 20:23 Letzten Beitrag anzeigen
Keine neuen Beiträge Divs ein und ausblenden Javascript 4 hummel dumm 13 Jan 2011 16:02 Letzten Beitrag anzeigen
Keine neuen Beiträge Layer automatisch ausblenden Javascript 0 iuna123 15 März 2010 10:17 Letzten Beitrag anzeigen
Keine neuen Beiträge Wenn Feld (Text81) 0,00 dann leer ode... Javascript 0 Gast 07 Aug 2009 09:17 Letzten Beitrag anzeigen
Keine neuen Beiträge PHP mehre variablen eines arrays zufä... PHP / MySQL 2 grinsekatze 10 Jun 2009 08:32 Letzten Beitrag anzeigen