为什么标签的内容没有显示?

时间:2014-07-10 11:07:27

标签: html css css3

我有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;}

2 个答案:

答案 0 :(得分:6)

标签2,3和4缺少结束</label>标记。

答案 1 :(得分:1)

Here是更新后的代码

您错过了关闭label