隐藏加载的div，并在点击时使其他人消失

Question

我找到了如何隐藏/显示div点击，但默认情况下它是显示的，我会让它们隐藏，只显示点击。 当一个人展示它时，我也会让其他人隐藏起来。

这是我的代码：

<img id="img1" 
onclick="document.getElementById ('txt_1').className = document.getElementById ('txt_1').className == 'hidden' ? '' : 'hidden'"
<i>https://codepen.io/drudrudru/pen/KeJQxY</i> 

Answer 1

若要将第二个文本作为默认值隐藏，请将类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">

Answer 2

首先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">

然后调用一个函数，这里我将其命名为showHide()，在图像 onclick 属性上。单独编写 JavaScript 代码是一种很好的做法。如果您在这种情况下完全避免点击，那就更好了。请改用事件侦听器。下面我将展示使用事件侦听器的另一种方法。

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">