我找到了如何隐藏/显示 div onclick，但默认情况下它是显示的，我会让它们隐藏并且只显示 onclick。 我也会在一个人展示的时候让其他人隐藏起来。
这是我的代码：
<img id="img1"
onclick="document.getElementById ('txt_1').className = document.getElementById ('txt_1').className == 'hidden' ? '' : 'hidden'"
<i>https://codepen.io/drudrudru/pen/KeJQxY</i>
【问题讨论】：
要让第二个文本默认隐藏，请将类 hidden 添加到 html 中。当您切换时，您的 JS 将删除它。在不改变结构的情况下，这里有一个示例，当您取消隐藏另一个文本块时，它将隐藏另一个文本块。当你隐藏它时它不会取消隐藏它。
这里有代码重复，您可以改进，但这应该会让您走上正轨。
<p id="txt_1">Born on April 22, 1923, in Nashville, Tennessee, Bettie was the second of Walter Roy Page and Edna Mae Pirtle’s six children. During Bettie’s early years, the Page family traveled around the country ...</p>
<p id="txt_2"> I would like to appear on click of "img2" and make "txt_1" disappear (and vice versa)</p>
<img id="img1"
onclick="document.getElementById ('txt_1').className = document.getElementById ('txt_1').className == 'hidden' ? '' : 'hidden'"
src="https://image.flaticon.com/icons/png/128/124/124563.png">
<br>
<img id="img2"
onclick="document.getElementById ('txt_2').className = document.getElementById ('txt_2').className == 'hidden' ? '' : 'hidden'"
src="https://cdn1.iconfinder.com/data/icons/hawcons/32/700175-icon-1-cloud-128.png">
function image1Toggle() {
if (document.getElementById("txt_1").className == "hidden") {
document.getElementById("txt_1").className = ""; //show
document.getElementById("txt_2").className = "hidden"; //hide
} else {
document.getElementById("txt_1").className = "hidden"; //hide
}
}
function image2Toggle() {
if (document.getElementById("txt_2").className == "hidden") {
document.getElementById("txt_2").className = ""; //show
document.getElementById("txt_1").className = "hidden"; //hide
} else {
document.getElementById("txt_2").className = "hidden"; //hide
}
}.hidden {display:none}
#txt_1 {color:red;
position: absolute;
left:242px;
width: 26%;
top:30px;
z-index: 3;}
#txt_2 {color:green;
position: absolute;
left:242px;
width: 26%;
top:180px;
z-index: 3;}
<!--- I would have txt hide onload and appear when the corresponding img is onclick--->
<p id="txt_1">Born on April 22, 1923, in Nashville, Tennessee, Bettie was the second of Walter Roy Page and Edna Mae Pirtle’s six children. During Bettie’s early years, the Page family traveled around the country ...</p>
<p id="txt_2" class="hidden"> I would like to appear on click of "img2" and make "txt_1" disappear (and vice versa)</p>
<img id="img1"
onclick="image1Toggle()"
src="https://image.flaticon.com/icons/png/128/124/124563.png">
<br>
<img id="img2"
onclick="image2Toggle()"
src="https://cdn1.iconfinder.com/data/icons/hawcons/32/700175-icon-1-cloud-128.png"> 【讨论】：
首先将hidden 类添加到您的两个段落中。
function showHide(obj) {
var txt1 = document.getElementById ('txt_1'),
txt2 = document.getElementById ('txt_2')
if (obj.id === 'img1') {
txt1.classList.toggle('hidden'); //it'll toggle the hidden class
txt2.classList.add('hidden'); //it'll add the hidden class to the other paragraph, if its not already hidden
}
else {
txt2.classList.toggle('hidden');
txt1.classList.add('hidden');
}
}.hidden {display:none}
#txt_1 {color:red;
position: absolute;
left:242px;
width: 26%;
top:30px;
z-index: 3;}
#txt_2 {color:green;
position: absolute;
left:242px;
width: 26%;
top:180px;
z-index: 3;}
<!--- I would have txt hide onload and appear when the corresponding img is onclick--->
<p id="txt_1" class="hidden">Born on April 22, 1923, in Nashville, Tennessee, Bettie was the second of Walter Roy Page and Edna Mae Pirtle’s six children. During Bettie’s early years, the Page family traveled around the country ...</p>
<p id="txt_2" class="hidden"> I would like to appear on click of "img2" and make "txt_1" disappear (and vice versa)</p>
<img id="img1"
onclick="showHide(this);"
src="https://image.flaticon.com/icons/png/128/124/124563.png">
<br>
<img id="img2"
onclick="showHide(this);"
src="https://cdn1.iconfinder.com/data/icons/hawcons/32/700175-icon-1-cloud-128.png"> 然后在图像的 onclick 属性上调用一个函数，这里我将其命名为 showHide()。单独编写 javascript 代码是一个好习惯。如果您在这种情况下完全避免 onclick，那就更好了。请改用事件侦听器。下面我将展示另一种使用事件监听器的方法。
document.getElementById('img1').addEventListener('click', function(e) {
showHide(e.target);
});
document.getElementById('img2').addEventListener('click', function(e) {
showHide(e.target);
});
function showHide(obj) {
var txt1 = document.getElementById ('txt_1'),
txt2 = document.getElementById ('txt_2')
if (obj.id === 'img1') {
txt1.classList.toggle('hidden'); //it'll toggle the hidden class
txt2.classList.add('hidden'); //it'll add the hidden class to the other paragraph, if its not already hidden
}
else {
txt2.classList.toggle('hidden');
txt1.classList.add('hidden');
}
}.hidden {display:none}
#txt_1 {color:red;
position: absolute;
left:242px;
width: 26%;
top:30px;
z-index: 3;}
#txt_2 {color:green;
position: absolute;
left:242px;
width: 26%;
top:180px;
z-index: 3;}
<!--- I would have txt hide onload and appear when the corresponding img is onclick--->
<p id="txt_1" class="hidden">Born on April 22, 1923, in Nashville, Tennessee, Bettie was the second of Walter Roy Page and Edna Mae Pirtle’s six children. During Bettie’s early years, the Page family traveled around the country ...</p>
<p id="txt_2" class="hidden"> I would like to appear on click of "img2" and make "txt_1" disappear (and vice versa)</p>
<img id="img1" src="https://image.flaticon.com/icons/png/128/124/124563.png">
<br>
<img id="img2" src="https://cdn1.iconfinder.com/data/icons/hawcons/32/700175-icon-1-cloud-128.png"> 【讨论】：