点击删除线

Question

是否有CSS方式来制作onclick删除线按钮。因此，当您单击按钮（文本）时，所选链接将获得删除线text-decoration？

随附图片作为说明。

Answer 1

纯CSS模拟按钮。单击时，该段落将变为带删除线的红色。

input[id=cb] {
  display: none;
}

input[id=cb]:checked~p.strikethrough {
  text-decoration: line-through;
  color: red;
}

label {
  border: thin solid darkgray;
  border-radius: 5px;
  padding: 10px;
  display: inline-block;
  margin-top: 5px;
}

<input name="cb" type="checkbox" id="cb">
<label for="cb">Click me</label>
<p class="strikethrough">Paragraph 1</p>
<p>Paragraph 2</p>
<p class="strikethrough">Paragraph 3</p>

Answer 2

您可以使用 JS 在任何元素上实现此目的。此外，您不仅可以删除onClick，还可以将删除的内容恢复到原来的状态。

$(function(){
  var $curParent, Content;
  $(document).delegate("span","click", function(){
    if($(this).closest("s").length) {
      Content = $(this).parent("s").html();
      $curParent = $(this).closest("s");
      $(Content).insertAfter($curParent);
      $(this).closest("s").remove();
    }
    else {
      $(this).wrapAll("<s />");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span>click</span>/<span>click</span>
</div>