순수 CSS 탭 선택시로드 동작

인터넷에서이 CSS 메뉴 탭을 발견했으며 스크립트없이 훌륭하게 작동합니다. 불행히도 2 문제가 있습니다. 첫 번째 문제는 페이지가로드 될 때 마지막 탭의 내용을 표시한다는 것입니다. 탭 1의 복제본을 작성하여이를 속일 수있었습니다. 해결할 수없는 두 번째 문제점은 페이지가 처음 선택된 탭으로로드 될 때 탭 1이 강조 표시되는 것입니다. 페이지가로드 될 때 강조 표시되도록 탭 1을 스타일링 할 수 있지만 다른 탭을 선택하면 강조 표시 해제하는 방법을 알 수 없습니다. 아무도 도와 줄 수 없거나 최소한 CSS에서 가능한지 말해 줄 수 있습니까?순수 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; 
}`

IE는 지원하지 않기 때문에 아마 스크립트를 사용하는 것이

`<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>`

출처

2011-10-31 Michael

HTML : 대상 선택기를. 이렇게하면 페이지가로드 될 때 선택하려는 탭을 결정할 수도 있습니다.

출처

2011-10-31 13:52:36 bullzito

순수 CSS 탭 선택시로드 동작

답변

관련 문제