切换-如何在单击另一个按钮时隐藏信息

Question

当我切换到另一个按钮时，我如何隐藏信息?现在，如果底部已经显示了信息，而我点击了另一个按钮，信息就会出现在底部。

function myClick() {
var x = document.getElementById("myDIV");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
function myClick2() {
var x = document.getElementById("myDIV2");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}

#myDIV,
#myDIV2 {
display: none;
}
.wrapper {
display: flex;
}
.col {
display: inline-block;
width: 50%;
padding: 2px 8px;
}
.box {
display: flex;
background-color: #f4f4f4;
}

<div class="wrapper">
<div class="col">
<div class="box" onclick="myClick()">Box</div>
</div>
<div class="col">
<div class="box" onclick="myClick2()">This is a box</div>
</div>
</div>
<div id="myDIV">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>
</div>
<div id="myDIV2">
This is my DIV element.
</div>

Answer 1

这只是一个逻辑问题。当你点击一个按钮时，你只是隐藏/显示相关的文本，而对其他文本没有任何作用。

这不是(到目前为止)最好的编程方法，但是可以开始。

你必须删除myClick2函数，只使用一个函数:myClick，传递一个参数。这个参数"告诉"按下哪个按钮的功能。函数应该是这样的:

function myClick(btn) {
var x = document.getElementById("myDIV");
var y = document.getElementById("myDIV2");
if (btn === 1) {
x.style.display = "none";
y.style.display = "block";
} else if (btn === 2) {
x.style.display = "block";
y.style.display = "none";
} else {
alert('The button has no related text');
}
}

在HTML部分，以这种方式调用传递参数的函数:两个按钮执行相同的函数，传递不同的数字作为参数。

<div class="wrapper">
<div class="col">
<div class="box" onclick="myClick(1)">Box</div>
</div>
<div class="col">
<div class="box" onclick="myClick(2)">This is a box</div>
</div>
</div>

Answer 2

试试这个，它可以很容易地帮助你在隐藏其他div的同时切换div

<div class="wrapper">
<div class="col">
<button class="box">Box</button>
</div>
<div class="col">
<button class="box1">This is a box</button>
</div>
</div>
<div id="myDIV" class="display">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>
</div>
<div id="myDIV2" class="display">
This is my DIV element.
</div>

css

.display{
display: none;
}
.show{
display:block;
}
.wrapper {
display: flex;
}
.col {
display: inline-block;
width: 50%;
padding: 2px 8px;
}
.box .box1 {
display: flex;
background-color: #f4f4f4;
}

Js

var show = document.querySelector(".box");
var showOne = document.querySelector(".box1");
show.addEventListener("click", onclick);
function onclick() {
document.getElementById("myDIV").classList.toggle("show");
document.getElementById("myDIV").classList.toggle("display");
document.getElementById("myDIV2").classList.remove("show");
document.getElementById("myDIV2").classList.add("display");
}
showOne.addEventListener("click",()=>{
document.getElementById("myDIV2").classList.toggle("show");
document.getElementById("myDIV").classList.remove("show");
document.getElementById("myDIV").classList.add("display");
document.getElementById("myDIV2").classList.toggle("display");
});