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

debugcn 发表于 Dev

优雅

我的页面中有两个名为 [DIV1,DIv2] 的 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>

31piy

一种理想的方法是创建一个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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。