在页面内打开一个框

Question

我不知道从哪里开始以及要搜索什么。我在我的HTML文件中有两个链接。当点击上面的链接并点击第二个链接时，我希望页面内的一个框出现在链接下方，第一个框会消失，第二个链接下面的另一个框将会出现。就像链接被点击时的滑动框一样。这是什么代码/职位？非常感谢！

Answer 1

我不了解你，但我猜你想一些事情是这样的：

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>

Answer 2

可以被称为内容切换器或标签控件。以下是在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>