按自定义顺序显示 DIV

Show DIVs in custom order

本文关键字：DIV 显示 顺序 自定义      更新时间：2023-09-26

我的页面上有一些链接。当我单击链接时，应显示相应的 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>

但我不想保持 1,2,3 的顺序。
因此，当我单击Link2，然后单击Link3，然后单击Link1时，我希望div以相同的顺序显示，因此Div2，Div3，Div1。

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

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

https://jsfiddle.net/t53LtL9q/

您可以将

flexbox与order一起使用

$(document).ready(function(){
    $("a").click(function(){
        showDIV(this);
    });
});
var order = 1;
function showDIV(param){
    var id = param.id;
    var $el = $("#div" + id);
    $el.css("order",order);
    $el.show();
    order ++;
}
.parent{
  display: flex;
  flex-flow: column;
}
.reiter{
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <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>
</div>
<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).attr('id'));
    });
});
function showDIV(param){
    
    $("#div"+param).css("display","block");
}
div{
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<a href="#" id="1">Link 1</a>
<a href="#" id="2">Link 2</a>
<a href="#" id="3">Link 3</a>

对

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

$(document).ready(function(){
    var contain = document.getElementById('container');
    function showDIV(param){
        var id = "div" + param.id;
        var div = document.getElementById(id);
        contain.appendChild(div);
        $(div).show();
    }
    
    $("a").click(function(){
        showDIV(this);
    });
});
div.reiter{
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
    <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>
</div>
<a href="#" id="1">Link 1</a>
<a href="#" id="2">Link 2</a>
<a href="#" id="3">Link 3</a>

一种可能的解决方案是将div 放在另一个容器中，然后将它们附加到另一个容器中，在那里它们将可见：

$("a").click(function() {
  var id = this.id;
  $('.visible-container').append($("#div" + id));
});
.hidden-container > div {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hidden-container">
  <div id="div1">1</div>
  <div id="div2">2</div>
  <div id="div3">3</div>
</div>
<div class="visible-container"></div>
<a href="#" id="1">Link 1</a>
<a href="#" id="2">Link 2</a>
<a href="#" id="3">Link 3</a>

相关文章：