0

ページに16個のdivがあり、すべてのdivの右上にクロスボタンがあります。クロスボタンをクリックすると、divを非表示にし、非表示のdivの横にあるdivを再配置する必要があります。たとえば、5個のdivがあるとします。

1 2 3 4 5

3が交差すると、シーケンスは次のようになります。

1 245。

ボタンのようなdivにもう1つのボタンがあり、そのボタンをクリックすると、そのdivは位置1になるはずです。たとえば、次のような10個のdivがあります。

1 2 3 4 5 6 7 8 9 0

8が好きだと言うと、レイアウトは次のようになります。

8 1 2 3 4 5 6 7 9 0

4

1 に答える 1

1

あなたはあなたのdivをフロートさせる必要があります。1つが非表示になると、残りは自動的に移動します。

再配置については、jQueryを使用して移動する必要があります。

このフィドルを試してみてください

HTML

<div id="container">
    <div class="box">1<br/><a class="like" href="#">Like me</a></div>
    <div class="box">2<br/><a class="like" href="#">Like me</a></div>
    <div class="box">3<br/><a class="like" href="#">Like me</a></div>
    <div class="box">4<br/><a class="like" href="#">Like me</a></div>
    <div class="box">5<br/><a class="like" href="#">Like me</a></div>
</div>

CSS

div.box { 
    display: block; 
    width: 90px; 
    height: 50px; 
    float: left; 
    margin: 5px; 
    border: 1px solid #000; 
    text-align: center;
}

Javascript

$('a.like').on('click', function () {
    $('#container').prepend($(this).parent());
    return false;
})

$('div.box').on('click', function() {
   $(this).hide();
})
于 2012-12-09T05:31:51.033 に答える