öffnet eine Box innerhalb der Seite, wenn Link geklickt wird

Question

Ich weiß nicht, wo ich anfangen und was ich suchen soll. Ich habe zwei Links in meiner HTML-Datei. Ich möchte, dass ein Feld innerhalb der Seite unter dem Link angezeigt wird, wenn auf den obigen Link geklickt wird, und wenn ich auf den zweiten Link klicke, wird das erste Feld ausgeblendet und das andere Feld unter dem zweiten Link wird angezeigt. Es ist wie eine verschiebbare Box, wenn der Link angeklickt wird. Was ist der Code/Post dafür? Ich danke dir sehr!

Answer 1

ich nicht Sie verstehen, aber ich denke, man soetwas wie diese wollen:

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

Kann ein Content Switcher oder ein Registerkarten-Widget aufgerufen werden. Hier ist eine einfache Möglichkeit, dies in CSS zu tun.

.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>

Und hier ist ein Weg, um es in JS zu tun

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>