Я нашел эту вкладку меню 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>`