Question

我在互联网上找到了这个CSS菜单标签，它没有任何脚本，效果很好。不幸的是有2个问题。第一个问题是，当页面加载时，它显示最后一个选项卡的内容。我能够通过创建选项卡1的副本来欺骗这个。我无法解决的第二个问题是当页面首次加载为选定选项卡时突出显示选项卡1。我可以在页面加载时将选项卡1设置为突出显示，但是当我选择另一个选项卡时，我无法弄清楚如何取消突出显示它。任何人都可以帮助或至少告诉我它是否可以在CSS中使用？

CSS

`.w3c {
    min-height:250px;
    position:relative;
    width:100%;
}
.w3c > div {
}
.w3c > div > a {
    margin-left:6px;
    position:relative;
    left:1px;
    text-decoration:none;
    color:#FFF;
    display: block;
    float:left;
    padding:5px 10px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    border-top:1px solid #cbcbcb;
    border-left:1px solid #cbcbcb;
    border-right:1px solid #cbcbcb;
    border-bottom:1px solid #FFF;
}
.w3c > div:not(:target) > a {
    border-bottom:0px;
    background-image:url(Example%20Six_files/Untitled-4.png);
    background-repeat:repeat-x;
    color:#FFFFFF;
}
.w3c > div:target > a {
    background:#FFF;
    color:#000000;
}
.w3c > div > div {
    background:#FFF;
    z-index:-2;
    left:0px;
    top:24px;
    bottom:0px;
    right:0px;
    padding:20px;
}
.w3c > div:not(:target) > div {
    position:absolute;
}
.w3c > div:target > div {
    position:absolute;
    z-index:-1;
}
.w3c div a:hover {
    background:#FFF;
    color:#000000;
    border-bottom:1px solid #FFF;
}`

HTML

`<div style="width:960px; border:solid 1px #cbcbcb; border-radius:5px; background-image:url(Example%20Six_files/Untitled-3.png); background-repeat:repeat-x;">
  <div class="w3c" style="margin-top:6px;">
    <div id="tab01">
      <a href="#tab01" style="margin-left:13px; font-family:Arial, Helvetica, sans-serif; font-size:11px;">Overview</a>
      <div>
        Overview
      </div>
    </div>
    <div id="tab02">
      <a href="#tab02" style="font-family:Arial, Helvetica, sans-serif; font-size:11px;">Product Details</a>
      <div>
        Product Details
      </div>
    </div>
    <div id="tab03">
      <a href="#tab03" style="font-family:Arial, Helvetica, sans-serif; font-size:11px;">Specifications</a>
      <div>
        Specifications
      </div>
    </div>
    <div id="tab04">
      <a href="#tab04" style="font-family:Arial, Helvetica, sans-serif; font-size:11px;">Manufacturer</a>
      <div>
        Manufacturer
      </div>
    </div>
    <div id="tab05">
      <a href="#tab05" style="font-family:Arial, Helvetica, sans-serif; font-size:11px;">Accessories</a>
      <div>
        Accessories
      </div>
    </div>
    <div>
      <a style="display:none;"></a>
      <div>
        Overview
      </div>
    </div>
  </div>
</div>`

Answer 1

我可能会使用脚本，因为IE不支持：target选择器。这样，您还可以决定在页面加载时选择哪个选项卡。

加载行为的纯CSS选定选项卡

1 个答案: