我有4个标签,仅显示第一个标签的内容。为什么其他标签的内容没有显示?
这是jsfiddle - http://jsfiddle.net/K3WVG/
此外,以下是html和css代码。
HTML:
<div class="tabs">
<form>
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1"><strong>Demographics</strong></label>
<div class="content">
<div class="tab-datagroup">
<div class="tab-datagrouphead">
<strong>Population by Age</strong>
</div>
<div class="tab-datagroupoptions">
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Mumbai</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Delhi</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Bengaluru</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Chennai</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Pune</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Ahmedabad</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Surat</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Agra</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Jaipur</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Kolkata</div>
</div>
</div>
<div class="tab-datagroup">
<div class="tab-datagrouphead">
<strong>Gender Division</strong>
</div>
<div class="tab-datagroupoptions">
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Mumbai</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Delhi</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Bengaluru</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Chennai</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Pune</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Ahmedabad</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Surat</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Agra</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Jaipur</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Kolkata</div>
</div>
</div>
<div class="tab-datagroup">
<div class="tab-datagrouphead">
<strong>Education</strong>
</div>
<div class="tab-datagroupoptions">
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Mumbai</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Delhi</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Bengaluru</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Chennai</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Pune</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Ahmedabad</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Surat</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Agra</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Jaipur</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Kolkata</div>
</div>
</div>
<div class="tab-datagroup">
<div class="tab-datagrouphead">
<strong>Monthly Income</strong>
</div>
<div class="tab-datagroupoptions">
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Mumbai</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Delhi</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Bengaluru</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Chennai</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Pune</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Ahmedabad</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Surat</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Agra</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Jaipur</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Kolkata</div>
</div>
</div>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2"><strong>Leisure & Lifestyle</strong>
<div class="content">
<div class="tab-datagroup">
<div class="tab-datagrouphead">
<strong>Avg. Daily Visitors to a Mall</strong>
</div>
<div class="tab-datagroupoptions">
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Mumbai</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Delhi</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Bengaluru</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Chennai</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Pune</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Ahmedabad</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Surat</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Agra</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Jaipur</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Kolkata</div>
</div>
</div>
<div class="tab-datagroup">
<div class="tab-datagrouphead">
<strong>No. of Malls</strong>
</div>
<div class="tab-datagroupoptions">
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Mumbai</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Delhi</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Bengaluru</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Chennai</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Pune</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Ahmedabad</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Surat</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Agra</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Jaipur</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Kolkata</div>
</div>
</div>
<div class="tab-datagroup">
<div class="tab-datagrouphead">
<strong>No. of Theaters</strong>
</div>
<div class="tab-datagroupoptions">
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Mumbai</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Delhi</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Bengaluru</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Chennai</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Pune</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Ahmedabad</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Surat</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Agra</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Jaipur</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Kolkata</div>
</div>
</div>
<div class="tab-datagroup">
<div class="tab-datagrouphead">
<strong>No. of Restaurants/sq. km</strong>
</div>
<div class="tab-datagroupoptions">
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Mumbai</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Delhi</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Bengaluru</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Chennai</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Pune</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Ahmedabad</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Surat</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Agra</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Jaipur</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Kolkata</div>
</div>
</div>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3"><strong>Infrastructure</strong>
<div class="content">
<div class="tab-datagroup">
<div class="tab-datagrouphead">
<strong>No. of Schools</strong>
</div>
<div class="tab-datagroupoptions">
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Mumbai</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Delhi</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Bengaluru</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Chennai</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Pune</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Ahmedabad</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Surat</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Agra</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Jaipur</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Kolkata</div>
</div>
</div>
<div class="tab-datagroup">
<div class="tab-datagrouphead">
<strong>No. of Colleges</strong>
</div>
<div class="tab-datagroupoptions">
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Mumbai</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Delhi</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Bengaluru</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Chennai</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Pune</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Ahmedabad</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Surat</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Agra</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Jaipur</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Kolkata</div>
</div>
</div>
<div class="tab-datagroup">
<div class="tab-datagrouphead">
<strong>Daily Flight Arrivals/Departures</strong>
</div>
<div class="tab-datagroupoptions">
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Mumbai</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Delhi</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Bengaluru</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Chennai</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Pune</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Ahmedabad</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Surat</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Agra</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Jaipur</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Kolkata</div>
</div>
</div>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-4" name="tab-group-1">
<label for="tab-4"><strong>Competition</strong>
<div class="content">
<div class="tab-datagroup">
<div class="tab-datagrouphead">
<strong>No. of Coffee Chains</strong>
</div>
<div class="tab-datagroupoptions">
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Mumbai</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Delhi</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Bengaluru</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Chennai</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Pune</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Ahmedabad</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Surat</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Agra</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Jaipur</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Kolkata</div>
</div>
</div>
<div class="tab-datagroup">
<div class="tab-datagrouphead">
<strong>Market Size for Coffee Powder</strong>
</div>
<div class="tab-datagroupoptions">
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Mumbai</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Delhi</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Bengaluru</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Chennai</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Pune</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Ahmedabad</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Surat</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Agra</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Jaipur</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Kolkata</div>
</div>
</div>
<div class="tab-datagroup">
<div class="tab-datagrouphead">
<strong>No. of Restaurant Chains</strong>
</div>
<div class="tab-datagroupoptions">
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Mumbai</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Delhi</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Bengaluru</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Chennai</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Pune</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Ahmedabad</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Surat</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Agra</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Jaipur</div>
<div class="tab-datagroupoption"><input name="" type="checkbox" value="" /> Kolkata</div>
</div>
</div>
</div>
</div>
</form>
</div>
CSS:
.tabs {
position: relative;
min-height: 430px; /* This part sucks */
margin: 50px 0 25px;
background: #ec8f88;
float:left;
width:700px;
}
.tab {
float: left;
}
.tab label {
background: #f3b6b0;
padding: 5px;
margin-left: -1px;
margin-right:5px;
-webkit-box-shadow: 1px 0px 0px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 1px 0px 0px 0px rgba(50, 50, 50, 0.75);
box-shadow: 1px 0px 0px 0px rgba(50, 50, 50, 0.75);
border-radius:20px 0 0 0;
position: relative;
left: 1px;
top: -31px;
-webkit-transition: background-color .17s linear;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: -1px;
left: 0;
background: #ec8f88;
right: 0;
bottom: 0;
padding: 0 15px;
-webkit-transition: opacity .6s linear;
opacity: 0;
}
[type=radio]:checked ~ label {
background: #ec8f88;
border-bottom: 1px solid #ec8f88;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
opacity: 1;
}
/*tabs - end*/
.tab-datagroup { width:650px; float:left; border:solid 1px #f3b6b0; padding:10px; margin-bottom:15px;}
.tab-datagrouphead { width:670px; float:left; text-align:center;}
.tab-datagroupoptions { width:670px; float:left; margin-top:10px;}
.tab-datagroupoption { float:left; width:124px; margin-right:10px;}