jquery - 切换具有相同名称的div css jquery

Question

我有 2 个同名的 div(不幸的是我不能重命名 div)。

如何切换 2 个“导航”div，以便第一个显示在另一个上方？

例子:

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

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

CSS 或 jQuery...

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

根据您的评论进行编辑。

使用 display: none 隐藏第二个 .nav，然后创建这个 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();        
    }
});

Live demo