击穿点击

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>

​

Answer 3

使用包装函数，我们可以在内部元素周围插入一个HTML结构，如下所示：

​

$('input[type=button]').click(function() {
  $('a').wrap("<strike>");
  //$('a').css("text-decoration", "line-through");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='button' id='but' value='Click'>
<a href="#">link</a>

​