Question

我试图让一个div显示一次点击另一个div。

以下是我现在的HTML：

<li><a href="#"><div class="parent7">Light Finish</div></a>
<li><a href="#"><div class="child1">Twin</div></a>

这是CSS：

  .parent7 {

        }
  .child1 {
        display: none;
    }

我不确定我的下一步是什么。我会使用哪些代码将.child1显示更改为阻止点击.parent7？

Answer 1

您可以使用javascript活动onclick

<div onclick="myFunction()">Light Finish</div>

当用户点击div时，它会调用您创建的函数：

<script>
function myFunction()
{
document.getElementById("TheIdOfTheDiv").style.display = "block";
}
</script>

只为你想要展示的div之一提供一个id。

Answer 2

你可以使用jQuery来做你需要的事情。像这样：

$(".parent7").on("click", function () {
    $(".child1").css("display", "block");
});

以下是如何使用jQuery代码。我还提供了有关如何链接到html文档中的jQuery库的信息。

这是一个非常基本但完整的网页示例：

<!DOCTYPE html>
<html>
    <head>
       <title>Page Title</title>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
       <style>
             .parent7 {

             }
             .child1 {
                 display: none;
             }
       </style>
    </head>
    <body>
        <div class="parent7">Light Finish</div>
        <div class="child1">Twin</div>

        <script>
            $(".parent7").on("click", function () {
                $(".child1").css("display", "block");
            });
        </script>
    </body>
</html>

您可以选择从CDN（内容交付网络）获取jQuery，就像我在上面的示例中所做的那样，或者您可以下载jQuery并根据需要链接文件。您可以下载jQuery Here。

Answer 3

如果您不必支持IE8，实际上可以在纯HTML / CSS中执行您所要求的操作。然而，它使用了一种相当模糊的技术。关键是使用target伪相选择器，如果元素是单击链接元素的目标，则适用。

HTML：

<div>
  <a href='#to-show'>Click to show other div.</a>
</div>
<div id='to-show'>Here I am.<div>

CSS：

#to-show{
  display: none;
}

#to-show:target{
  display: block;
}

以下是使用此代码的JSBin链接：http://jsbin.com/dirugavoba/edit?html,css,js,output

现在，正如所说，实现交互性的最佳方式实际上是使用JavaScript。尽管存在这种概念证明，但JavaScript提供了更直观，更通用的方法来提供此功能。使用我在这里展示的技术的唯一真正原因是，如果你想要或必须迎合那些仍然关闭JavaScript的少数用户。

Answer 4

在处理clickevents并操纵html / style时，你必须使用javascript。

看看＆＃34; onclick＆＃34;可以在html元素上设置的方法。

显示Div On（其他）Div点击？

4 个答案: