如何在 div 中制作非活动内容？答案

【问题标题】：How to make inactive content inside a div?如何在 div 中制作非活动内容？
【发布时间】：2012-12-31 04:55:38
【问题描述】：

如何使用 JavaScript 使某些 div 块中的内容处于非活动状态？

假设有一个带有“启用/禁用”命令的按钮。并且有一个带有一些文本的 div 块。按下“启用/禁用”按钮时，是否为“启用”，您可以使用里面的内容，但是当“禁用”时，您不能使用 div 块中的内容。

我想为了在 div 块内制作非活动内容，我们需要在其上放置另一层，以防止编辑内容 div 块上的内容。

我很困惑如何实现这种功能。

【问题讨论】：

定义“使用里面的内容”。您是在谈论编辑/内容可编辑吗？
可能会在他们激活 div 并将其值设置为 div html 时向 div 添加一个文本框。然后当它停用时，您只需删除文本框并将 div html 设置为文本框的值

标签： css layout html

【解决方案1】：

在不使用覆盖的情况下，您可以在 CSS 中的 div 上使用 pointer-events: none，但这在 IE 或 Opera 中不起作用。

div.disabled
{
  pointer-events: none;

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

Reference

【讨论】：

【解决方案2】：

使用 jquery 你可能会做这样的事情：

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

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

这是一个 jsFiddle 示例：http://jsfiddle.net/monknomo/gLukqygq/

您还可以选择目标 div 的子元素，并为它们添加一个“已禁用”的 css 类，并使用不同的视觉属性作为标注。

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

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

这里以 jsFiddle 为例：https://jsfiddle.net/monknomo/g8zt9t3m/

【讨论】：

【解决方案3】：

如果您想在另一个屏幕尺寸的视图中隐藏整个 div。您可以按照以下代码为例。

div.disabled{
  display: none;
}

【讨论】：

问题是禁用按钮。请仔细阅读问题

【解决方案4】：

在 CSS 中将 div[disabled] 的指针事件设置为无，

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

您可以通过添加禁用属性来禁用 div。

<div disabled>
  <!-- Contents -->
</div>

【讨论】：

【解决方案5】：

div[disabled]
{
  pointer-events: none;
  opacity: 0.6;
  background: rgba(200, 54, 54, 0.5);  
  background-color: yellow;
  filter: alpha(opacity=50);
  zoom: 1;  
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  
  -moz-opacity: 0.5; 
  -khtml-opacity: 0.5;  
}

【讨论】：