Javascript 使用纯JS在点击过程中使div堆叠在彼此之上

正如你在我的小提琴中看到的，我的提琴在点击时会回到它们的自然位置。我需要最后单击哪个div始终显示在顶部。我当前的代码：

function displayOne() {
    document.getElementById("fluid1").style.display = 'block';
}

function displayTwo() {
    document.getElementById("fluid2").style.display = 'block';
}

function displayThree() {
    document.getElementById("fluid3").style.display = 'block';
}

---

如果可能的话，我宁愿避免使用jQuery。谢谢大家!

我想试试这样的东西

单击后将它们移动到容器中，这样它们可以保持顺序，具体取决于它们移动到容器中的顺序

如果要将它们添加到顶部，可以使用insertBefore。它的工作原理如下：

---

我想试试这样的

单击后将它们移动到容器中，这样它们可以保持顺序，具体取决于它们移动到容器中的顺序

如果要将它们添加到顶部，可以使用insertBefore。它的工作原理如下：

---

演示-

---

演示-

---

您可以使用

insertBefore

。工作

---

您可以使用

insertBefore

。工作

---

功能可以更加模块化：

---

功能可以更加模块化：

---

我注意到在您的示例中，正确的选项显示在底部。如何将它们移到顶部？我注意到在您的示例中，正确的选项如何显示在底部。如何将它们移到顶部？

var target = document.getElementById( "container");

function displayOne() {
    target.appendChild(document.getElementById("fluid1"));
}

function displayTwo() {
    target.appendChild(document.getElementById("fluid2"));;
}

function displayThree() {
    target.appendChild(document.getElementById("fluid3"));
}

var target = document.getElementById( "container");

function displayOne() {
    target.insertBefore(document.getElementById("fluid1"), target.firstChild);
}

function displayTwo() {
    target.insertBefore(document.getElementById("fluid2"), target.firstChild);;
}

function displayThree() {
    target.insertBefore(document.getElementById("fluid3"), target.firstChild);
}

var container = document.getElementById('container');

function displayOne() {
    var div = document.getElementById("fluid1");
    div.style.display = 'block';
    container.insertBefore(div, container.firstChild);
}

function display(ev) {
    ev.preventDefault();
    var id = this.href.split('#')[1],
        div = document.getElementById('fluid' + id),
        divs = document.getElementsByClassName('container-fluid');

    //if current div is not first insert it before the first one
    div !== divs[0] && div.parentNode.insertBefore(div, divs[0]); 
    div.style.display = 'block'; //and show
}

[].forEach.call(document.getElementsByClassName('toggle'), function(link){
    link.addEventListener('click', display);
});

function displayDiv(elem_id) {
var elem = document.getElementById(elem_id);
elem.style.display = 'block';

var elemCloned = elem.cloneNode(true);
// console.log(elemCloned);

var theparentnode = elem.parentNode;
// console.log(theparentnode);

var divList = document.getElementsByClassName("container-fluid");


var first_element = divList[0];

theparentnode.insertBefore(elemCloned, first_element);
theparentnode.removeChild(elem);
}