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

Question

我有这个结构：

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

现在，我想点击#hide:target，div#d2消失。

我可以使用CSS吗？

Answer 1

你可以用CSS做到这一点！

如果您稍微更改HTML标记，则可以使用CSS :target

来实现此目的

    #d2:target {
        display: none;
    }

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

Answer 2

您应该使用javascript或jQuery来完成此任务。

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

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

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

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

Answer 3

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

$(document).ready(function(){
    $("a").click(function(){
        $("#d2").hide();
    });
});

Answer 4

您可以使用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>

Answer 5

我坚信CSS代表风格，Javascript代表功能（HTML代表标记）。

我犯了一个错误：使用目标并使用CSS构建功能不应该这样，并且相信我，你将会在未来的道路上为这些坏习惯制造噩梦。在这样的情况下，jQuery将成为你最好的朋友。它适用于所有浏览器（支持javascript），并且您不会在边缘情况下破坏您的功能，并且您的用户会生气。做Jack说的并使用一些简单的jQuery。您还可以使用.addClass和.removeClass以其他方式更改css，而不仅仅是隐藏/显示。

通过单击另一个来更改元素的css样式

5 个答案:

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