通过点击另一个元素改变元素的 CSS 样式

Question

我有这个结构：

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

现在，当点击#hide:target时，div#d2消失。

我能用CSS实现这个吗？

- Theraloss

---

CSS 没有点击事件，它有 :hover 选择器，但没有点击。 - gvee

@gvee CSS的:active不是一个点击选择器吗？ - Memolition

@Memolition 我猜它有点像，但更像是“点击并保持”选择器。一旦鼠标释放，选择器就不再有效。 - gvee

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>

- idmean

---

提供一个创新的解决方案加1分。我认为只使用CSS没有其他方法可以实现它。 - AnaMaria

非常好。谢谢！ - Theraloss

Answer 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>

- Logan Murphy

---

一个不错的解决方案。但仍然不完美。因为document.getElementById是一个Jscript函数，所以我仍然会选择这个... +1 - AnaMaria

Answer 3

你可能需要使用 JavaScript 或 jQuery 来完成这个任务。

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

使其特定于此（局部范围）

(保留html，不做解释)

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

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

- Casey Dwayne

Answer 4

你可以简单地使用jQuery来完成这个操作：

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

- Dinesh

Answer 5

使用 CSS 我认为不可能，但你可以使用我在这里提供的代码，它基于 JavaScript，在这种情况下非常有用。我不太擅长解释，但对于这些类型的问题，我建议学习 JavaScript。

<div id="d1">Text</div>
<div id="d2">Word</div>
<a onclick="hide()">My other text</a>

这是你的HTML文件，我创建了一个DOM事件，当你点击时，我们的js文件中将运行一个名为hide()的函数。提示：不要忘记将html与javascript文件链接起来。你可以使用以下方式完成：

<script src="yourfilegoeshere"><script>

现在让我们进入CSS：

#d1 {
opacity: 1;
}
#d2 {
opacity: 1;
}

基于这个 CSS，两者都是可见的。现在让我们转到我们的 JS 文件：

function hide() {
  var d2 = document.getElementById('d2')
  d2.style.opacity = '0'
}

现在如果你点击您的a，d2将不可见。

希望我有所帮助！

- Feijão FuturoTurco

Answer 6

我坚信CSS是用于样式，而JavaScript是用于功能（HTML则用于标记）。

我曾经犯过使用:target和在不应该的地方使用CSS构建功能的错误，相信我，这些不良习惯会让你在未来遇到噩梦。在这种情况下，jQuery将成为您最好的朋友。它适用于所有支持JavaScript的浏览器，您不必担心功能在边缘情况下崩溃，也不必担心用户感到恼火。按照Jack的建议使用一些简单的jQuery。您还可以使用.addClass和.removeClass以其他方式更改CSS，而不仅仅是隐藏/显示。

- Ty Underwood

---

醒醒吧！你不需要 jQuery 就可以做到这一点。 - idmean

您说得没错，您不必使用jQuery。但是，正如您在这个表格中所看到的：http://www.quirksmode.org/css/selectors/（查找 :target），您提出的方式在任何版本的IE上都无法很好地工作。即使是9和10（在我看来非常好的浏览器）也被列为具有“不完整”的支持。并非一定要使用jQuery，就像并非一定要遵循良好的实践。但是为了让事情在许多用例中正常工作，请尽量使用良好的实践。现在已经过了上午11点，我还清醒着，谢谢。 - Ty Underwood

我的意思是，如果这是你唯一需要使用 JavaScript 的时候，最好使用纯 JavaScript，而不是 jQuery。我并不是在谈论使用 CSS。 - idmean

啊！好的，我被你上面的评论搞糊涂了。完全正确。如果项目已经在使用jQuery，那么使用它可能是个好主意，但如果没有，你不需要这种抽象。然而，如果有人正在学习如何将JavaScript添加到他们的网站中，jQuery非常适合新手，并值得使用。 - Ty Underwood