html - 消失的输入

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" 形式的目标创建该元素的 anchor 。之后，您只需确保元素具有正确的 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>