✔ Div nicht klickbar mit If

[Mangosaft]

Wie kann ich so coden, also dass ein DIV b nicht klickbar ist, solange man DIV a nicht geklickt hat? Zum Beispiel soll es so etwas aussehen (das untere Code funktioniert ja nicht, des weiß ich):

<?php
if DIV a klick
then DIV b klickbar
else
DIV 1 nicht klickbar
?>

Ich denke, man benötigt auch noch mit Javascript.

Ich habe nur bis das geschafft, aber es funktioniert nicht, weil eine "nicht klickbar"-Funktion nicht eingebaut ist:

<div onclick="this.style.visibility='hidden'" id="regeln-b">
Bitte zuerst Regeln lesen und akzeptieren.
</div>

<div onclick="this.style.visibility='hidden'" id="regeln-a">
Regeln blabla...

Einverstanden.
</div>

 

[ComFreek]

Hallo und herzlich Willkommen im Forum Mangosaft

Du kannst dies nicht mit PHP realisieren, da PHP vollkommen auf dem Server abläuft. Das Rendern und die Interaktion mit DOM-Elementen im HTML läuft allerdings nur auf der Client-Seite (dem Browser).

Also muss eine Lösung mit JS her.

Was meinst du denn mit DIV b ist klickbar? Jedes Objekt ist klickbar oder meinst du die Sichtbarkeit?

 

[Mangosaft]

Danke ComFreek!

Ich weiß, das nicht mit PHP funktioniert. Ich schreib nur so, damit jmd. es leichter und besser versteht, was ich damit meine.
Ja, normalerweise ist jeder DIV-Objekte klickbar, aber ich möchte das im Gegenteil. Besser erklärt: Man soll ein DIV-Element klicken um es wieder schliesst bzw. weg erscheinen wird. Aber das Problem ist, man kann beide DIV-Elemente einfach wegklicken, deswegen wollte ich das dagegen tun. Erst muss man DIV-Element x wegklicken, bevor man DIV-Element y wegklicken kann.

 

[ComFreek]

Wenn ich mal deinen bestehenden Code erweitern dürfte:

<div id="regeln-b">
Bitte zuerst Regeln lesen und akzeptieren.
</div>
 
<div id="regeln-a">
Regeln blabla...
 
Einverstanden.
</div>

// Optional type="text/javascript", falls kein HTML5-Doctype
<script>
function hideObj(obj) {
  obj.style.display = "none";
}

window.addEventListener("load", function () {
  var $divA = document.getElementById("regeln-a"),
      $divB = document.getElementById("regeln-b");
  var mayHideB = false;

  $divA.addEventListener("click", function () {
    hideObj(this);
    mayHideB = true;
  });

  $divB.addEventListener("click", function () {
    if (mayHideB) {
      hideObj(this);
    }   
  });
});
</script>

addEventListener() funktioniert übrigens nicht mit IE<9.
Wenn du unbedingt IE<9 unterstützen möchtest, kannst du dir Helferfunktionen schreiben oder eine bestehendes JS-Framework (wie jQuery) nutzen.

Wobei letzeres nicht zu empfehlen wäre, wenn du nur sehr wenig JS hättest.

 

[Mangosaft]

Code funktioniert vorhin nicht, dann hab ich des in Lupe genommen und nen Fehler gefunden:

$b.addEventListener("click", function () {

Ich habe des

$b.addEventListener

in

$DivB.addEventListener

geändert, dann geht's wieder.


Vielen Dank, ComFreek )

 

[Carrear]

Benutz jquery, dann ist es ganz einfach ^^