顯示Div On（其他）Div點擊？

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;
    }

我不確定下一步是什么。 在單擊.parent7我將使用什么代碼來更改.child1顯示以阻止？

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。

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

在處理clickevent和處理html / style時，必須使用javascript。

查看可以在html元素上設置的“ onclick”方法。

顯示Div On（其他）Div點擊？

問題描述

4 個解決方案

解決方案1
2 2016-08-19 00:26:23

解決方案2
1 2016-08-19 00:28:47

解決方案3
1 2016-08-19 00:40:11

解決方案4
0 2016-08-19 00:25:03

顯示Div On（其他）Div點擊？

問題描述

4 個解決方案

解決方案1 2 2016-08-19 00:26:23

解決方案2 1 2016-08-19 00:28:47

解決方案3 1 2016-08-19 00:40:11

解決方案4 0 2016-08-19 00:25:03

解決方案1
2 2016-08-19 00:26:23

解決方案2
1 2016-08-19 00:28:47

解決方案3
1 2016-08-19 00:40:11

解決方案4
0 2016-08-19 00:25:03