Блог

Я нашел это меню 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 Six_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 Six_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>`
 

Я бы, вероятно, использовал скрипт, поскольку IE не поддерживает селектор :target . Таким образом, вы также можете решить, какую вкладку вы хотите выбрать при загрузке страницы.