點擊時顯示DIV

我有 2 個 div 元素，我想在 Div 2 上添加一些內容，當我單擊該 Div 時，它將顯示 Div 1，因此單擊 Div 2 時兩個 DIV 都將可見！Div 2 應該一直可見，但是當我單擊 DIV 2 時，它應該顯示 Div 1！

我想要一個JS腳本！

.box1 {
  display: none;
  color: white;
  font-weight: 100;
  background-color: rgba(234, 21, 56, 0.3);
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  border: 3px solid #ea1538;
  width: 200px;
  max-height: 300px;
  overflow: scroll;
  margin-left: 20px;
  margin-top: 40px;
  transition: ease 0.5s;
  padding: 10px 10px;
  box-sizing: border-box;
  box-shadow: 0px 0px 10px gainsboro;
}

.box1::-webkit-scrollbar {
  display: none;
}

.box1:hover {
  transition: ease 0.5s;
  transform: scale(1.1);
}

#cover1 {
  width: 100%;
  height: 40%;
}

.box2 {
  display: inline-block;
  color: white;
  font-weight: 100;
  background-color: rgba(234, 21, 56, 0.3);
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  border: 3px solid #ea1538;
  width: 200px;
  max-height: 300px;
  overflow: scroll;
  margin-left: 1%;
  margin-top: 40px;
  transition: ease 0.5s;
  padding: 10px 10px;
  box-sizing: border-box;
  box-shadow: 0px 0px 10px gainsboro;
}

.box2::-webkit-scrollbar {
  display: none;
}

.box2:hover {
  transition: ease 0.5s;
  transform: scale(1.1);
}

#cover2 {
  width: 100%;
  height: 40%;
}

<div class="box1">
  <img src="/images/Books/book_bg.jpg" alt="cover" id="cover1" />
  <h3 class="desc1">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et iste ipsum harum beatae dolor fugit repudiandae a quaerat doloremque pariatur, suscipit molestias ipsa minus. Non explicabo quam quasi illo accusamus aliquid, reiciendis autem? Quas odio hic
    pariatur necessitatibus nobis nisi fugiat ab voluptate. Perferendis maiores quisquam cumque quod aspernatur ipsa?
  </h3>
</div>


<div class="box2">
  <button type="button" id="box2btn" onclick="href='window.location.https://www.facebook.com'">
             <img src="/images/Books/book_bg.jpg" alt="cover" id="cover2" />
             <h3>
               Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi
               natus quidem perferendis architecto sapiente, eius, praesentium, odio
               illo provident quos nostrum quaerat! Placeat saepe, blanditiis id
               assumenda ab autem in unde maxime alias, obcaecati distinctio expedita
               veritatis deserunt atque exercitationem quasi dolorum eum quas. Voluptas
               consequatur nisi sint porro quos?
             </h3>
      </div>

uj5u.com熱心網友回復：

我們去https://jsfiddle.net/byr0kqL5/

簡單的功能

function addNewDiv() {
   const box1 = document.getElementById("box1-content") //find element with id `box1-content`
   box1.classList.remove("display-none"); //make box 1 visible by `display-none` removal
} 

但你需要添加這種風格

.display-none {
  display: none;
}

你的盒子1會是這樣的

<div class="box1 display-none" id="box1-content"></div>

最后，您的框 2 需要有onclick事件

<div class="box2" onclick="addNewDiv()"></div>

uj5u.com熱心網友回復：

首先將此屬性添加到 Div2 ：

onclick="showDiv()"

并將 id 和 class 添加到 Div1

id="div1"
class="hide"

JavaScript：

function showDiv() {
   div1=document.getElementById("div1");
   div1.classList.remove("hide");
}

CSS：

.hide{
   display: none;
}

標籤：javascript html css 点击

上一篇：“page-break-after”屬性中“left”和“right”的值有什么作用？

下一篇：在懸停時從左側而不是右側添加寬度