Question

正如你可以在我的小提琴中看到的那样，当我点击它们时，我的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。谢谢！

Answer 1

我会尝试这样的事情。

点击时将它们移动到一个容器中，这样他们就可以保持顺序，具体取决于它们移动到容器中的顺序。

http://jsfiddle.net/Zgxv9/1/

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"));
}

如果您希望将它们添加到顶部，则可以使用insertBefore。它将如下工作：http://jsfiddle.net/Zgxv9/7/

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);
}

Answer 2

DEMO - http://jsfiddle.net/Zgxv9/6/

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

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

Answer 3

您可以使用insertBefore method。工作demo。

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);
});

Answer 4

该功能可以更模块化：http://jsfiddle.net/t76BX/58/

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);
}

在使用纯JS进行点击期间使div堆叠在一起

4 个答案: