it-swarm.com.de

Wie mache ich inaktive Inhalte in einem div?

Wie kann ich Inhalte in einem div -Block mithilfe von JavaScript inaktivieren?

Angenommen, es gibt eine Schaltfläche mit dem Befehl "Aktivieren/Deaktivieren". Und es gibt einen div-Block mit Text. Wenn Sie auf die Schaltfläche "Aktivieren/Deaktivieren" klicken, können Sie mit Inhalten im div-Block arbeiten. Wenn Sie jedoch auf "Deaktivieren" klicken, können Sie nicht mit Inhalten im div-Block arbeiten.

Ich stelle mir vor, um inaktiven Inhalt im div-Block zu erstellen, müssen wir eine weitere Ebene darüber legen, die verhindert, dass der Inhalt im content div-Block bearbeitet wird.

Ich bin verwirrt, wie man diese Art von Funktion realisiert.

25
ilnur777

Ohne Overlay können Sie pointer-events: none auf dem div in CSS, aber dies funktioniert nicht in IE oder Opera.

div.disabled
{
  pointer-events: none;

  /* for "disabled" effect */
  opacity: 0.5;
  background: #CCC;
}

Referenz

64
Evan Mulawski
div[disabled]
{
  pointer-events: none;
  opacity: 0.7;
}

Mit dem obigen Code wird der Inhalt des Div deaktiviert. Sie können div deaktivieren, indem Sie das Attribut disabled hinzufügen.

<div disabled>
  /* Contents */
</div>
8
Pramod

Mit jquery könnten Sie so etwas machen:

// To disable 
$('#targetDiv').children().attr('disabled', 'disabled');

// To enable
$('#targetDiv').children().attr('enabled', 'enabled');

Hier ist ein jsFiddle-Beispiel: http://jsfiddle.net/monknomo/gLukqygq/

Sie können auch die untergeordneten Elemente des Ziel-Divs auswählen und ihnen eine "deaktivierte" CSS-Klasse mit verschiedenen visuellen Eigenschaften als Legende hinzufügen.

//disable by adding disabled class
$('#targetDiv').children().addClass("disabled");

//enable by removing the disabled class
$('#targetDiv').children().removeClass("disabled");

Hier ist eine jsFiddle mit dem als Beispiel: https://jsfiddle.net/monknomo/g8zt9t3m/

0
monknomo

wenn Sie ein ganzes Div in einer anderen Bildschirmgröße aus der Ansicht ausblenden möchten. Sie können dem folgenden Code als Beispiel folgen.

div.disabled{
  display: none;
}
0
Vayodya Tamari