• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Class ausblenden, ID einblenden

FreddyFY

Neues Mitglied
Hey,

Ich habe ein Problem bei Java und zwar habe ich folgendes [nur ein Beispiel]

HTML
<div class="klasse" id="baum">
</div>
<div class="klasse" id="vogel">
</div>
<div class="klasse" id="blume">
</div>

CSS
#vogel{display:none;}
#blume{display:none;}

jetzt möchte ich dass bei z.B. einen Klick alle ausgeblendet werden und Vogel eingeblendet wird.
Dazu könnte ich mit style display baum ausblenden und vogel einblenden. Da ich aber viel mehrere Kontainer haben werde ist mir das zu umständlich.

Ich habe jetzt versucht die Klasse auszublenden, und in der gleichen Funktion #Vogel einblenden. Das hat aber nicht funktioniert. Ich möche es aber dass es genau so einfach funktioniert.

Ich hoffe ich konnte es deutlich genug schreiben.

Freddy
 
Werbung:
Hey,

Ich habe ein Problem bei Java und zwar habe ich folgendes [nur ein Beispiel]

HTML
<div class="klasse" id="baum">
</div>
<div class="klasse" id="vogel">
</div>
<div class="klasse" id="blume">
</div>

CSS
#vogel{display:none;}
#blume{display:none;}

jetzt möchte ich dass bei z.B. einen Klick alle ausgeblendet werden und Vogel eingeblendet wird.
Dazu könnte ich mit style display baum ausblenden und vogel einblenden. Da ich aber viel mehrere Kontainer haben werde ist mir das zu umständlich.

Ich habe jetzt versucht die Klasse auszublenden, und in der gleichen Funktion #Vogel einblenden. Das hat aber nicht funktioniert. Ich möche es aber dass es genau so einfach funktioniert.

Ich hoffe ich konnte es deutlich genug schreiben.

Freddy

Nein, das ist nicht deutlich genug. Wie wärs mit dem code deiner Funktion?
 
Also.. ich versuche es jetzt nochmals besser zu erklären.

Ich bin dabei eine Single Page[oder wie man die nennt] zu erstellen.
Ich habe eine Navigation [class="navi"] diese ist am oberen Rand fixiert.
Wenn ich eine bestimmte weite scrolle [pageYOffset] soll eine veränderte Navigation gezeigt werden.

Nun dachte ich mir ich mache mehrere Navigationen, immer class="navi", und unterscheide sie durch verschiedner IDs.
In der style.css habe ich die anderen Navigationen, die mit display: none; unsichtbar gemacht.

Diese sollen jetzt bei einen bestimmten pageYOffset angezeigt werden, und alle anderen Navigationen, die gerade nicht benötigt werden ausgeblendet.

Der Versuch der nicht funktionierte:

PHP:
window.onscroll = function() {
            var scrollBereich = pageYOffset;
            var naviBox = document.getElementsByClassName("navi");

                function naviWechsel(element){
               
                    for(var i=0; i < naviBox.length; i++) {
                    var navi = naviBox;
                    navi.style.display = 'none';
                    }
                    document.getElementById(element).style.display = 'block';
                }

            if(scrollBereich> '100px;'){
                    naviWechsel('vogel');
            }
}

Ich hoffe jetzt ist es verständlich genug ;)

Freddy
 
Zuletzt bearbeitet:
Werbung:
Mit jQuery sind das zwei Zeilen:
Code:
$(".klasse").css("display", "none");
$(element).css("display", "block");
Dein Code ist auch schon richtig. Das Problem ist nur, dass naviBox ein Array ist, was man auch bei der Anwendung von naviBox.length sieht. So ist es richtig:
Code:
var navi = naviBox[i];
BTW: Wo um alles in der Welt sind hier die Code-Tags. Ich muss sie immer von Hand hinschreiben.
 
Vielen Dank, mit jQuerry wird es wohl am einfachsten gehen.

Und danke für das Stichwort Array, ein wichtiges Element das ich in meiner Javascript Lernphase noch nicht entdeckt habe. Ich glaube jetzt wird mir das Programieren noch viel mehr Spaß machen. :D

Freddy
 
Zuletzt bearbeitet:
Zu früh gefreut...
Heute wollte ich den jQuerry Code in meine Datei packen, und es funktioniert immer noch nicht.
Die Navigation blendet es aus, wie es sein soll, aber danach blendet es mir die ID nicht richtig ein.
Meine Navigation hat ein background-color: grey, nachdem ich diesen gewissen Teil runterscrolle wird mir nur die Hintergrundfarbe angezeigt, ohne den Text im Navi.

Freddy
 
Werbung:
Habe den Fehler jetzt selber herausgefunden, meinen A-Tags hatten die gleiche Class wie der <div class="navi></div>.

Sorry..


Freddy
 
Zurück
Oben