Question

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

Answer 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/

Answer 2

您可以将flexbox与order一起使用

＆＃13;

$(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 ++;
}

＆＃13;

.parent{
  display: flex;
  flex-flow: column;
}


.reiter{
    display: none;
}

＆＃13;

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

＆＃13;

Answer 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>

Answer 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>

Answer 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>

按自定义顺序显示DIV

5 个答案: