Javascript 按自定义顺序显示div

我的页面上有一些链接。单击链接时，应显示相应的DIV。
这将按预期工作：

<style>
div{
    display: none;
}
</style>
<script>
$(document).ready(function(){
    $("a").click(function(){
        showDIV(this);
    });
});
function showDIV(param){
    var id = param.id;
    $("#div" + id).show();
}
</script>

<div id="div1">Ro 1</div>
<div id="div2">Ro 2</div>
<div id="div3">Ro 3</div>

<a href="#" id="1">Link 1</a>
<a href="#" id="2">Link 2</a>
<a href="#" id="3">Link 3</a>

div{
显示：无；
}
$（文档）.ready（函数（）{
$（“a”）。单击（函数（）{
showDIV（这个）；
});
});
函数showDIV（参数）{
变量id=参数id；
$（“#div”+id）.show（）；
}
Ro 1
Ro 2
Ro 3

但我不想保持1,2,3的顺序。

---

因此，当我单击Link2、Link3、Link1时，我希望div以相同的顺序显示，因此Div2、Div3、Div1。

您可以使用

flexbox

和

顺序

$（文档）.ready（函数（）{
$（“a”）。单击（函数（）{
showDIV（这个）；
});
});
var阶数=1；
函数showDIV（参数）{
变量id=参数id；
var$el=$（“#div”+id）；
$el.css（“订单”，订单）；
$el.show（）；
订单++；
}

.parent{
显示器：flex；
柔性流动：柱；
}
雷特先生{
显示：无；
}

Ro 1
Ro 2
Ro 3

一种解决方案是在另一个块中单独显示它们：

HTML

<div class="reiter reiter_oben" id="div1">Ro 1</div>
<div class="reiter reiter_oben" id="div2">Ro 2</div>
<div class="reiter reiter_oben" id="div3">Ro 3</div>

<span id="display"></span>

<a href="#" id="1">Link 1</a>
<a href="#" id="2">Link 2</a>
<a href="#" id="3">Link 3</a>

$(document).ready(function(){
    $("a").click(function(){
        showDIV(this);
    });
});
function showDIV(param){
    var id = param.id;
    $('#display').append($("#div" + id).show());
}

试试这个

$（文档）.ready（函数（）{
$（“a”）。单击（函数（）{
showDIV（$（this.attr（'id'））；
});
});
函数showDIV（参数）{
$（“#div”+param）.css（“显示”、“块”）；
}

div{
显示：无；
}

Ro 1
Ro 2
Ro 3

对代码进行一些小更改，添加一个容器来移动div

$（文档）.ready（函数（）{
var contain=document.getElementById（'container'）；
函数showDIV（参数）{
var id=“div”+参数id；
var div=document.getElementById（id）；
contain.appendChild（div）；
$（div.show（）；
}
$（“a”）。单击（函数（）{
showDIV（这个）；
});
});
div.reiter{
显示：无；
}

Ro 1
Ro 2
Ro 3
一种可能的解决方案是将div放在另一个容器中，然后将它们附加到另一个容器中，您可以在其中看到它们：


$（“a”）。单击（函数（）{
var id=this.id；
$（'.visible container'）。追加（$（“#div”+id））；
});
.hidden container>div{
显示：无；
}

1.
2.
3.
如果你认为它很有用，那么你可以投票支持我的ans@user1170330不，这和我的一样。它始终以相同的顺序显示div：1、2、3。但我希望它们按我单击它们的顺序显示，例如3,1,2。