javascript - 单击链接时在页面内打开一个框

Question

我不知道从哪里开始，也不知道要搜索什么。我的 HTML 文件中有两个链接。当单击上面的链接时，我希望页面中的一个框出现在链接下方，当我单击第二个链接时，第一个框将消失，第二个链接下方的另一个框将出现。单击链接时，它就像一个滑动框。这个的代码/帖子是什么？非常感谢!

Answer 1

可以称为内容切换器或选项卡小部件。这是在 CSS 中执行此操作的简单方法。

.box {
  display: none;
}
.box:target {
  display: block;
}

<a href="#one">one</a> <a href="#two">two</a>

<div id="one" class="box">box one</div>
<div id="two" class="box">box two</div>

这是一种在 JS 中实现的方法

var links = document.getElementsByTagName('a'),
    boxes = document.getElementsByClassName('box');
for (var i = 0; i < links.length; i++) {
  links[i].addEventListener('click',function(e) {
    e.preventDefault();
    var url = this.getAttribute('href').replace('#','');
    for (var j = 0; j < boxes.length; j++) {
      boxes[j].classList.remove('active');
    }
    document.getElementById(url).classList.add('active');
  })
}

.box {
  display: none;
}
.active {
  display: block;
}

<a href="#one">one</a> <a href="#two">two</a>

<div id="one" class="box">box one</div>
<div id="two" class="box">box two</div>