순수한 CSS 콘텐츠 탭 - 표시 할 콘텐츠를 가져올 수 없습니다.

각각 다른 콘텐츠를 표시하는 탭 집합을 만들려고하지만 각 탭의 콘텐츠가 표시되어야하는 영역에는 아무 것도 보이지 않습니다. 나는 온라인 자습서에서 몇 가지 다른 기술을 시도했지만 여전히 내가 뭘 잘못하고 있어요. 내용의 불투명도를 0으로 설정하고 100으로 변경하려고 시도하지만 더 좋은 방법이 있다면 알려주세요.순수한 CSS 콘텐츠 탭 - 표시 할 콘텐츠를 가져올 수 없습니다.

가능한 경우 CSS로 유지하려고합니다.

HTML :

이

<!DOCTYPE html> 

<html> 
<head> 
    <title>Pure CSS Tabs</title> 
    <link href="css/actorpage.css" type="text/css" rel="stylesheet"> 
</head> 
<body> 
    <div class="tabs"> 
     <input id="tab1" type="radio" name="radio" class="UploadAudio" value="checked" /> 
     <label for="tab1">Upload Audio</label> 
     <input id="tab2" type="radio" name="radio" class="UploadVideo" /> 
     <label for="tab2">Upload Video</label> 
     <input id="tab3" type="radio" name="radio" class="UpdateResume" /> 
     <label for="tab3">Update Resume</label> 
     <input id="tab4" type="radio" name="radio" class="MyAccount" /> 
     <label for="tab4">My Account</label> 
      <div class="content"> 
       <div class="filler"> 
        <div id="content1" class="UploadAudio"> 
         <p>1</p> 
        </div> 
        <div id="content2" class="UploadVideo"> 
         <p>2</p> 
        </div>     
        <div id="content3" class="UpdateResume"> 
         <p>3</p> 
        </div> 
        <div id="content4" class="MyAccount"> 
         <p>4</p> 
        </div> 
       </div> 
      </div> 
    </div> 
</body>

CSS :

html, body { 
font-family: verdana, helvetica; 
} 

.tabs { 
animation: fadein .6s ease-in; 
position: auto; 
margin: 50px auto; 
width: 90%; 
height: 500px; 
border-radius: 25px 25px 0px 25px; 
z-index: 100; 
} 

.tabs input { 

position: absolute; 
height: 40px; 
opacity: 0; 
} 
.tabs > label { 
transition: .5s ease 0; 
margin: 0; 
padding: 20px 2em; 
position: relative; 
border: 1px solid black; 
line-height: 40px; 
height: 40px; 
background-color: white; 
text-transform: uppercase; 
} 

.tabs > input:hover + label { 
background-color: white; 
} 

.tabs > input[type="radio"]:checked + label { 
    display: inline-block; 
    background-color: white; 
    border-bottom: 1px white; 
    margin-bottom: -1px; 
    box-shadow: 0 0 0 0; 
    opacity: 100; 
    z-index: 100; 
} 

.content{ 
opacity: 0; 
border: 1px solid black; 
background-color: white; 
padding: 10px 10px; 
height: 100%; 
overflow: auto; 

box-shadow: 0 0 20px #444; 
-moz-box-shadow: 0 0 20px #444; 
-webkit-box-shadow: 0 0 20px #444; 

border-radius: 0 5px 5px 5px; 
-moz-border-radius: 0 5px 5px 5px; 
-webkit-border-radius: 0 5px 5px 5px; 

}

출처

2013-11-04 synapseradio

당신은 바이올린에 넣을 수 있습니까? (http://www.jsfiddle.net) – Leon

'content '전체에'opacity : 0'을주었습니다. '1'로 되돌려 놓으면 내용을 보게 될 것입니다. 이제는 탭 클릭 동작을 관리해야합니다 : http://jsfiddle.net/Pf59s/ – BeNdErR

첫 번째 탭을 활성 상태로 만들려면'value = "를"checked "로 변경합니다. checked = "checked"또는 단지'checked'. HTML 라디오 버튼의'value' 속성은 체크되고있는 상태를 유지하지 않습니다. 또한 CSS 불투명도는 항상 0에서 1 사이입니다 (100 불투명도는 여전히 유효 함). – mcometa

불투명 제거 : 0 클래스 "내용"에. 모든 콘텐츠 # 1, # content2, # content3, # content4에 {display : none;} 클래스를 추가하고 탭이 활성화 된 콘텐츠에 대해서만 클래스를 삭제 해보세요.

출처

2013-11-04 07:41:48

순수한 CSS 콘텐츠 탭 - 표시 할 콘텐츠를 가져올 수 없습니다.

답변

관련 문제