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>

Answer 2

我不明白你，但我想你想要这样的事情：

function myFunction() {
    var x = document.getElementById('myDIV');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}

#myDIV {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top:20px;
}

<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

<button onclick="myFunction()">Try it</button>

<div id="myDIV">
This is my DIV element.
</div>

单击链接时在页面中打开一个框

2 个答案: