javascript - 如何将 <div> 替换为另一个 <div> 单击 div 中的链接

Question

我在页面中有一个 div。我们称它为 div1。 div 包含一个链接，比如“Link1”。我想单击 Link1 并将 div1 替换为 div2，它有一个 Link2； Link2 onclick 将 div2 替换为 div1。 需要使用 javascript/angularjs/html/css 来完成这个。

Answer 1

由于您没有要求的描述，我将尽可能以最笼统的方式回答这个问题。

我的解决方案是使用 vanilla Javascript 通过事件监听器操作 DOM。您可以随意翻译我的方法。

您可以通过切换另一个 div 的 CSS 显示属性来完成此操作。

运行以下命令并注意更重要的部分是 Javascript:

let div1 = document.getElementById('div1')
let div2 = document.getElementById('div2')
let link1 = document.getElementById('link1')
let link2 = document.getElementById('link2')

link1.addEventListener("click", function () {
  div1.style.display = "none"
  div2.style.display = "block"
})

link2.addEventListener("click", function () {
  div2.style.display = "none"
  div1.style.display = "block"
})

div {
  width: 100px;
  height: 100px;
  margin: 10px;
  text-align: center;
  line-height: 100px;
  position: absolute;
}

#div2 { 
  display: none;
  background-color: red;
}

#div1 {
  display: block;
  background-color: green;
}

<div id="div1"> 
  <a id="link1" href="#">Link 1</a>
</div>
<div id="div2"> 
  <a id="link2" href="#">Link 2</a>
</div>