html - 隐藏 div onload 并使其他 onclick 消失

问题描述

我找到了如何隐藏/显示 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>

标签： htmlcssshow-hideonload

要让第二个文本默认隐藏，您可以将该类添加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">

html - 隐藏 div onload 并使其他 onclick 消失

问题描述

解决方案

推荐阅读