2

以下と同じ名前の 2 つの div があります (残念ながら、div の名前を変更することはできません)。

最初のものが他の上に表示されるように、2 つの「nav」div を切り替えるにはどうすればよいですか?

例：

<div class="main">
   <div class="nav"> ... </div>
   <div class="nav"> ... </div>
</div>

不思議に思うかもしれませんが、これは CMS を介してまとめられているため、両方とも同じクラス名でナビゲートする必要があります。しかし、1 つ目 (div) が 2 つ目の前に表示されるようにします。

CSSかjQuery...

4

5 に答える 5

1

このデモが好きですか

$('.main .nav:first-child').appendTo('.main');
于 2013-10-07T10:28:59.270 に答える
1

以下を使用して CSS でそれらを選択できます。

/* first .nav */
.main .nav:first-child { ... }
.main .nav:nth-child(1) { ... }

/* second .nav */
.main .nav:nth-child(2) { ... }
.main .nav:last-child { .. } /* will select the LAST .nav */

あなたのコメントに基づいて編集します。

.navを使用して 2 番目を非表示にしてdisplay: noneから、この jQuery 関数を作成します (私は jQuery ヒーローではないことに注意してください)。

$(".swapIt").click(function() {
    if( $(".main .nav:nth-child(1)").is(":visible") ) {
        $(".main .nav:nth-child(1)").hide();
        $(".main .nav:nth-child(2)").show();
    }
    else {
        $(".main .nav:nth-child(2)").hide();
        $(".main .nav:nth-child(1)").show();        
    }
});

ライブデモ

于 2013-10-07T09:54:37.803 に答える
0

.first()セレクターを使用できます。

$( ".main" ).first().css( "z-index", "1000" );
于 2013-10-07T09:54:29.840 に答える
0

次のように、クラス nav で最初の div を選択できます。

$( ".main .nav" ).first();

デモ

于 2013-10-07T10:04:16.837 に答える