2

我有 2 个与下面同名的 div（不幸的是，我无法重命名 div）。

如何切换 2 个“导航”div，使第一个出现在另一个上方？

例子：

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

万一你想知道，这是通过 CMS 放在一起的 - 所以我必须导航，两者都具有相同的类名。但我希望第一个（div）出现在第二个之前。

CSS 或 jQuery...

4

5 回答 5

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

编辑基于您的评论。

隐藏第二个.navusing 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 回答
1

你想喜欢这个演示吗

$('.main .nav:first-child').appendTo('.main');
于 2013-10-07T10:28:59.270 回答
0

您可以使用.first()选择器：

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

你可以试试这个：

$('.main .nav:eq(0)').before($('.main .nav:eq(1)'));
于 2013-10-07T09:56:57.127 回答
0

可以像这样选择具有类 nav 的第一个 div：

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

演示

于 2013-10-07T10:04:16.837 回答