如何将嵌套选项卡放在选项卡中？

Question

我有一组标签正常工作。

jsfiddle here - http://jsfiddle.net/K3WVG/

如何在标签中放置嵌套标签？

虽然我可以使用javascript / jquery方法，但纯粹的css / html方法会产生奇迹。

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>

的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;
}
    </div>

Answer 1

嵌套标签的自定义代码。看看这可能会有所帮助。 http://jsfiddle.net/

$('.tabs a').click(function(){
var idd = $(this).attr('href');

if($(idd).hasClass('tabs_content')) //First Level
{
    $('.tabs_content').hide();
    $(idd).fadeIn();
    $(idd).find('.tabs ul li:first a').click(); //Default Open inner tab
    $('.tabs:first ul li a.active').removeClass('active'); //remove active class
    $(this).addClass('active'); //add class

}else if($(idd).hasClass('tab_content_inner')) //Second Level
{
    $('.tab_content_inner').hide();
    $(idd).fadeIn();
    $(this).parent().siblings().find('a.active').removeClass('active');//remove active class
    $(this).addClass('active');//add class
}

return false;
});