单击时显示 DIV

Question

我有 2 个 div 元素，我想在 Div 2 上添加一些东西，当我点击那个 Div 时，它会显示 Div 1 ，因此当单击 Div 时，两个 DIV 都将可见 2! 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>

Answer 1

我们开始了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>

Answer 2

首先将此属性添加到 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;
}

单击时显示 DIV

Display DIV's on Click

html

javascript

css

onclick