0

我正在尝试制作一组​​选项卡，每个选项卡都显示不同的内容，但是在每个选项卡的内容应该显示的区域中，我什么也没看到。我从在线教程中尝试了几种不同的技术，但我仍然坚持自己做错了什么。我已将内容的不透明度设置为零，并试图触发更改为 100，但如果有更好的方法，请告诉我。

如果可能的话，我正在尝试将其保留为 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;

}
4

1 回答 1

0

删除不透明度：“内容”类上的 0。尝试将 class .hide {display:none;} 添加到所有 #content1、#content2、#content3、#content4 并仅针对已激活选项卡的内容将其删除。

于 2013-11-04T07:41:48.507 回答