我有 2 个与下面同名的 div(不幸的是我无法重命名这些 div)。
如何切换 2 个“导航”div,以便第一个出现在另一个上方?
示例:
<div class="main">
<div class="nav"> ... </div>
<div class="nav"> ... </div>
</div>
以防万一您想知道,这是通过 CMS 组合在一起的 - 所以我必须导航,两者都具有相同的类名。但我希望第一个 (div) 出现在第二个之前。
CSS 或 jQuery...
最佳答案
您可以使用 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();
}
});
关于jquery - 切换div的同名css jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19221661/