纯粹的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内容标签 - 无法获得内容显示

回答

相关问题