消失的输入

Question

HTML

 <a href="test" id="w" target="_blank"><input type="image" id="button1" src="button.png" /></a>

CSS

#w:target {
display: none;
}

知道为什么这不能正常工作？ 完整脚本： http://jsfiddle.net/Q2NMZ/180/#&togetherjs=wwKcmVHQRN

Answer 1

你的问题是你在错误的元素上使用：target选择器。它应该附加到您想要消失的实际元素上。然后，您只需使用href="#ID-OF-ELEMENT"形式的目标为该元素创建锚点。之后，您只需确保元素具有正确的ID，以便正确链接。

我为你做了一个更简单的例子，看看怎么做。

a { display:block; }

input.hideable{
  display:block;
  border:1px solid #AAA;
}

.hideable:target {
  display:none;
}

<a href="#testInput">HideInput</a>
<input src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" class="hideable" type="image" placeholder="Test" id="testInput" />

<a href="#testInput2">HideInput</a>
<input src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" class="hideable" type="image" placeholder="Test" id="testInput2" />

<a href="#testInput3">HideInput</a>
<input class="hideable" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" type="image" placeholder="Test" id="testInput3" />

已更新以使用input[type="image"]

通过jquery永久删除：

$('body').on('click','a.do-hide',function(event) { 
          event.preventDefault(); 
          var href = $(this).attr('href');
          $(href).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<a href="#button1" class="do-hide">Hide Button</a>

<div id="button1">Hide Me</div>