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 を他のリンクよりも前に配置することになっているナビゲーション メニューに、次の 3 つのリンクを配置します。

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

質問: クリックされたリンクに基づいて、特定の div を残りの上に配置できる jQuery コードはどれですか?

4

4 に答える 4

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 に答える