在頁面內打開一個框

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>