Question

无论如何，我正在尝试创建一个切换链接，它基本上是两个按钮。其中一个在点击时会变为display:none，反之亦然。

目前，我的CSS就像这样

#main-nav:target + .page-wrap {
    position:absolute;
    left:-80px;
    #open-menu {
    display: none;
    }
    #close-menu {
    display: block;
    }
}

...但是#open-menu和#close-menu显示选项似乎没有显示。有什么帮助吗？

编辑：好吧所以我需要一个预处理器好._。

再次编辑：得到它的工作，谢谢你们！只是想知道，有没有办法让我的整个页面div（不包括菜单）滑动 out 页面？或者它是一些简单的overflow-x：hidden？

Answer 1

如果你没有使用预处理器并且你不想这样做，我怀疑你可以这样重写你的CSS，假设你的HTML结构实际上对应于选择器：

#main-nav:target + .page-wrap {
    position: absolute;
    left: -80px;
}

#main-nav:target + .page-wrap #open-menu {
    display: none;
}

#main-nav:target + .page-wrap #close-menu {
    display: block;
}

当然，如果#open-menu和#close-menu不是.page-wrap的后代，那么这根本不起作用，即使您使用预处理器来支持编写嵌套样式规则（如果使用普通的CSS无法完成预处理器，则无法执行某些操作）。

如上所述，如果这些元素之间没有关系，可以用后代和兄弟组合子来表达，那么你必须使用JavaScript来实现你想要做的事情。

Answer 2

作为演示，我尝试了以下内容：

<div class="page-wrap">
    <a id="close-menu" href="#open-menu">Close</a> 
    <a id="open-menu" href="#close-menu">Open</a> 
</div>

使用以下CSS：

.page-wrap #open-menu {
    display: block;
}
.page-wrap #close-menu {
    display: none;
}

.page-wrap #open-menu:target {
    display: block;
}
.page-wrap #open-menu:target + #close-menu {
    display: none;
}

.page-wrap #close-menu:target {
    display: block;
}
.page-wrap #close-menu:target + #open-menu {
    display: none;
}

小提琴参考：http://jsfiddle.net/audetwebdesign/5aSdW/
演示链接：http://jsfiddle.net/audetwebdesign/5aSdW/show

每次单击“打开”或“关闭”链接时，都会显示备用链接。

我不确定这是否过于有用，但可以做到。

使用：目标和相邻的兄弟选择器来制作切换按钮

2 个答案: