3

我有这个结构：

<div id="d1">
Text
<div id="d2">Word</div>
<a href="#hide">My other text</a>
</div>

现在，我希望点击后#hide:target消失div#d2。

我可以用 CSS 做到这一点吗？

4

5 回答 5

15

你可以用 CSS 做到这一点！

如果你稍微改变你的 HTML 标记，你可以通过使用 CSS 来实现:target

    #d2:target {
        display: none;
    }
    <div id="d1">
      Text
    <div id="d2">Word
      <a href="#d2">My other text</a>
    </div>

于 2013-08-05T14:07:01.313 回答
2

您可以使用 CSS 执行此操作，但您需要使用 javascript 来更改元素的 CSS（样式）。

此解决方案不需要插件（例如 jQuery）。

<div id="d1">
    Text
    <div id="d2">Word</div>
    <a href="#hide" onclick="document.getElementById('d2').style.display='none';">My other text</a>
</div>

如果您希望它完全没有功能。

<div id="d1">
    Text
    <div id="d2">Word</div>
    <a href="#hide" onclick="this.previousSibling.previousSibling.style.display='none';">My other text</a>
</div>
于 2013-08-05T14:02:52.817 回答
1

您可能应该使用 javascript 或 jQuery 来完成此操作。

$('#object').click(function(){
   $('#tohide').hide();
});

使其特定于此（本地范围）

if($('#d2 a').attr('href')=='#hide'){
  $('#d2 a').click(function(){
     $('#d2').hide();
  });
}

但这不是正确的做法。使用类。

于 2013-08-05T13:58:06.360 回答
1

你可以用 jQuery 简单地做到这一点：

$(document).ready(function(){
    $("a").click(function(){
        $("#d2").hide();
    });
});
于 2013-08-05T14:02:48.957 回答
0

我坚信 CSS 是为了样式，而 Javascript 是为了功能（而 HTML 是为了标记）。

我犯了一个错误，使用 :target 并在不应该使用 CSS 的地方构建功能，相信我，你会因为这些坏习惯而为自己做一场噩梦。在这种情况下，jQuery 将成为你最好的朋友。它适用于所有浏览器（支持 javascript），并且您不会让您的功能在极端情况下崩溃并且您的用户会生气。照杰克所说的去做，并使用一些简单的 jQuery。您还可以使用 .addClass 和 .removeClass 以其他方式更改 CSS，而不仅仅是隐藏/显示。

于 2013-08-05T14:35:00.213 回答