按自定义顺序显示 DIV答案

【问题标题】：Show DIVs in custom order按自定义顺序显示 DIV
【发布时间】：2016-02-11 11:08:09
【问题描述】：

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

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

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>

Javascript

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

https://jsfiddle.net/t53LtL9q/

【讨论】：

【解决方案2】：

您可以将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>

【讨论】：

【解决方案3】：

试试这个

$(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>

【讨论】：

如果您认为它有帮助，那么您可以投票赞成我的 ans @user1170330
不，和我的一样。它始终以相同的顺序显示 DIV：1、2、3。但我希望它们按照我单击它们的顺序显示，例如3,1,2.

【解决方案4】：

对代码进行小改动，添加一个容器来移动 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>

【讨论】：

【解决方案5】：

一种可能的解决方案是将 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>

【讨论】：