创建导航菜单时遇到问题

Question

我确信这很容易，但我就是想不通。我有这个 HTML (http://jsfiddle.net/qzr3X/)

<div id="wrapper">
<ul id="tabs">
    <li><a href="#">Dashboard</a></li>
    <li><a href="#">Second Tab</a></li>
    <li><a href="#">Third Tab</a></li>
</ul>
<div id="content"></div>

​

和 CSS：

 * {
    margin: 0;
    padding: 0;
}
ul#tabs {
    list-style-type: none;
    overflow: hidden;
}

ul#tabs li  {
    float: left;
}
ul#tabs li a {
    z-index: 99;
    display: block;
    margin: 0 0.416em -6px 0;
    padding: 1.66em 0.833em;
    border: 1px solid lightgray;
    background: lightgray;
    border-bottom: none;
}

div#content {
    background: lightgray;
    height: 100px;
    border: 1px solid black;
}​

我想让它看起来像一个导航菜单。但是，像往常一样，我希望内容区域的边框覆盖除活动选项卡以外的所有选项卡（在本例中为“仪表板”）：

我已经尝试增加 z-index，但它不起作用。我错过了什么？

问候

Answer 1

我不能 100% 确定你的目标是什么。

据我所知，您希望边框出现在非活动选项卡周围，并且没有边框将活动选项卡与内容分开。对吗？

这基本上不是通过欺骗活动选项卡以与内容匹配的边框颜色覆盖内容边框。

You can see a demo here

但是您需要注意添加到“仪表板”选项卡中的类。它是一个活动类，它覆盖了它所应用的选项卡底部的边框。

我添加了一些 jquery 以在您单击选项卡时动态更改边框。