は、リンクがクリックされたときにページ内にボックスを開きます。

Question

どこから検索するのかわかりません。 HTMLファイルに2つのリンクがあります。上記のリンクをクリックすると、ページ内のボックスがリンクの下に表示され、2番目のリンクをクリックすると、最初のボックスが消え、2番目のリンクの下にあるもう1つのボックスが表示されます。リンクがクリックされると、スライドボックスのようになります。これのコード/ポストは何ですか？どうもありがとうございます！

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>

は、あなたのhtmlコードを提供

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>