Question

我的页面中有两个名为[DIV1，DIv2]的DIV，我可以在其中隐藏和取消隐藏每个DIV，现在可以在页面自动加载时显示DIV1，然后显示Div2并单击按钮显示DIV2，然后自动隐藏DIV1。我在下面提供了示例。

function myFunction1() {
    var x = document.getElementById("myDIV1");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

function myFunction2() {
    var x = document.getElementById("myDIV2");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

#myDIV1 {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: blue;
    margin-top: 20px;
}
#myDIV2 {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: red;
    margin-top: 20px;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>



<button onclick="myFunction1()">Div1</button>
<button onclick="myFunction2()">Div2</button>

<div id="myDIV1">
This is First Div.
</div>

<div id="myDIV2">
This is Second Div.
</div>





</body>
</html>

Answer 1

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      #myDIV1 {
        width: 100%;
        padding: 50px 0;
        text-align: center;
        background-color: blue;
        margin-top: 20px;
      }

      #myDIV2 {
        width: 100%;
        padding: 50px 0;
        text-align: center;
        background-color: red;
        margin-top: 20px;
        display: none;
      }

    </style>
  </head>

  <body>
    <button onclick="toggleDisplay()">Div1</button>
    <button onclick="toggleDisplay()">Div2</button>

    <div id="myDIV1">
      This is First Div.
    </div>
    <div id="myDIV2">
      This is Second Div.
    </div>

    <script>
      function toggleDisplay() {
        var div1 = document.getElementById("myDIV1");
        var div2 = document.getElementById("myDIV2");
        if (div1.style.display === "none") {
          div1.style.display = "block";
          div2.style.display = "none";
        } else {
          div1.style.display = "none";
          div2.style.display = "block";
        }
      }
    </script>
  </body>

</html>

您可以通过一个函数来解决这个问题:-) 切换块，无显示CSS

Answer 2

现在屏幕上至少会有一个div。

   

  var x = document.getElementById("myDIV1");
  var y = document.getElementById("myDIV2");
 function myFunction1() {
  x.style.display = "block";
  y.style.display = "none";
}

function myFunction2() {
  y.style.display = "block";
  x.style.display = "none";
}

#myDIV1 {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: blue;
    margin-top: 20px;
}
#myDIV2 {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: red;
    margin-top: 20px;
    display:none;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>



<button onclick="myFunction1()">Div1</button>
<button onclick="myFunction2()">Div2</button>

<div id="myDIV1">
This is First Div.
</div>

<div id="myDIV2">
This is Second Div.
</div>





</body>
</html>

Answer 3

一种理想的方法是创建一个隐藏特定元素的类（如以下示例中的hidden）。首先将此类分配给第二个div，以便在页面加载时不显示该类。

然后，您可以根据需要在函数运行时在特定元素上添加/删除此类。

请参见下面的演示

function myFunction1() {
  var x = document.getElementById("myDIV1");
  var y = document.getElementById("myDIV2");
  x.classList.remove('hidden');
  y.classList.add('hidden');
}

function myFunction2() {
  var x = document.getElementById("myDIV1");
  var y = document.getElementById("myDIV2");
  y.classList.remove('hidden');
  x.classList.add('hidden');
}

#myDIV1 {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: blue;
  margin-top: 20px;
}

#myDIV2 {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: red;
  margin-top: 20px;
}

.hidden {
  display: none;
}

<button onclick="myFunction1()">Div1</button>
<button onclick="myFunction2()">Div2</button>

<div id="myDIV1">
  This is First Div.
</div>

<div id="myDIV2" class="hidden">
  This is Second Div.
</div>

Answer 4

如果您正在使用bootstrap4，则已经有'd-none'类。您可以使用它。检查以下代码段。

function myFunction1() {
    var x = document.getElementById("myDIV1");
    var y = document.getElementById("myDIV2");
    
    x.classList.remove("d-none");
    y.classList.add("d-none");
    
    
}

function myFunction2() {
    var x = document.getElementById("myDIV1");
    var y = document.getElementById("myDIV2");
    
    y.classList.remove("d-none");
    x.classList.add("d-none");
}

#myDIV1 {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: blue;
    margin-top: 20px;
}
#myDIV2 {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: red;
    margin-top: 20px;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>



<button onclick="myFunction1()">Div1</button>
<button onclick="myFunction2()">Div2</button>

<div id="myDIV1">
This is First Div.
</div>

<div class="d-none" id="myDIV2">
This is Second Div.
</div>





</body>
</html>

使用javascript隐藏和取消隐藏div元素

4 个答案: