純粹的CSS內容標籤 - 無法獲得內容顯示

我試圖製作一組標籤，每個標籤顯示不同的內容，但在每個標籤內容應顯示的區域，我什麼都看不到。我已經嘗試了來自在線教程的幾種不同的技術，但我仍然堅持我做錯了什麼。我已將內容的不透明度設置爲零，並且我試圖觸發更改爲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 = 「檢查」或者「檢查」。 HTML單選按鈕的'value'屬性不保存它被檢查的狀態。另外，請注意，CSS不透明度總是從0到1（儘管100不透明度仍然有效）。 – mcometa

刪除不透明度：在類「內容」 0。嘗試將class .hide {display：none;}添加到所有＃content1，＃content2，＃content3，＃content4，並僅將其移出激活了該選項卡的內容。

來源

2013-11-04 07:41:48

純粹的CSS內容標籤 - 無法獲得內容顯示

回答

相關問題