Question

请你帮忙解决一些例子，如何使用javascript使某些div块中的内容无效？

假设有一个带有“启用/禁用”命令的按钮。并且有一个带有一些文本的div块。当按下“启用/禁用”按钮时，如果是“启用”，则可以使用内部内容，但是当“禁用”时，您无法使用div块内的内容。

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

我对如何实现这种功能感到困惑。任何帮助将不胜感激。

Answer 1

如果不使用叠加层，您可以在CSS中的pointer-events: none上使用div，但这在IE或Opera中不起作用。

div.disabled
{
  pointer-events: none;

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

Reference

Answer 2

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

上面的代码使div的内容禁用。您可以通过添加禁用属性来使div禁用。

<div disabled>
  /* Contents */
</div>

Answer 3

使用jquery你可能会这样做：

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

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

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

你也可以选择目标div的孩子并添加一个＆＃34;禁用＆＃34; css将具有不同视觉属性的类作为标注。

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

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

以下是一个例子：https://jsfiddle.net/monknomo/g8zt9t3m/

Answer 4

如果要在另一个屏幕大小的视图中隐藏整个div。您可以按照以下代码作为示例。

div.disabled{
  display: none;
}

Answer 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;  
}

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

5 个答案: