0

我有几个具有相同类名的 div：

<div class="cont" id="cont-a">bla bla</div>
<div class="cont" id="cont-b">blo blo</div>
<div class="cont" id="cont-c">bli bli</div>

在导航菜单中也有这三个链接，它们应该将相关的 div 放在其他链接之前：

<a href="#">Show bla bla</a>
<a href="#">Show blo blo</a>
<a href="#">Show bli bli</a>

问题：什么 jQuery 代码允许我根据单击的链接将特定 div 定位在其余部分之上？

4

4 回答 4

0

看到这个 jsfiddle。我认为它按预期工作。

<div id='nav' >
  <a href="#" data-target='#cont-a' >Show bla bla</a>
  <a href="#" data-target='#cont-b' >Show blo blo</a>
  <a href="#" data-target='#cont-c' >Show bli bli</a>    
</div>

<div class="container" >
  <div class="cont" id="cont-a">bla bla</div>
  <div class="cont" id="cont-b">blo blo</div>
  <div class="cont" id="cont-c">bli bli</div>
</div>

$('#nav a').on('click', function(e) {
    e.preventDefault();
    $container = $('.container')
    target = $(this).data('target');
    $div = $(target)

    $container.prepend($div);
});

希望这可以帮助。

于 2013-05-08T23:04:48.013 回答
0

如果所有 3 个元素都float:none;可以使用$("#some_div").css("float","left");

这将把它推到首位。

于 2013-05-08T22:41:38.370 回答
0

创建一个包装器 div 并使用$(selector).append(...). 所以首先，你可以给<a>标签一个id. 基于此，id您可以调用$(#[a tag id]).click(function() {put div append here...}.

于 2013-05-08T22:26:24.327 回答
0

这是你想要的？

<div>
    <div class="cont" id="cont-a">bla bla</div>
    <div class="cont" id="cont-b">blo blo</div>
    <div class="cont" id="cont-c">bli bli</div>
</div>

更改链接以包含一些标识符：

<a href="#" data-target="#cont-a">Show bla bla</a>
<a href="#" data-target="#cont-b">Show blo blo</a>
<a href="#" data-target="#cont-c">Show bli bli</a>

然后你可以做这样的事情......

$('a').on('click', function(event) {
    event.preventDefault();
    $('div.cont.cloned').remove();
    $('div.cont').show();
    var target = $($(this).attr('data-target')),
        clone = target.clone();
    target.hide();
    clone.addClass('cloned');
    clone.prependTo($('div.cont').parent());
});

编辑这应该可以正常工作，并且它使项目保持相同的顺序（除了被“移动”到前面的项目）。

于 2013-05-08T22:28:52.347 回答