关于div嵌套问题

div嵌套问题解决

问题

<ul class='tab-title'>
    <li class='select></li>
    <li></li>
</ul>
<div class='tab-content'>
    <div class='select'>
        <div><!-- 此处属于div嵌套 -->
            <ul>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <div>
        <div><!-- 此处属于div嵌套 -->
            <ul>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <div>
        <div><!-- 此处属于div嵌套 -->
            <ul>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</div>

解决

<ul class='tab-title'>
    <li class='select></li>
    <li></li>
</ul>
<div class='tab-content'>
    <div class='select'>
        <span><!-- 内部div换成其他标签即可，本例以span标签为例 -->
            <ul>
                <li></li>
                <li></li>
            </ul>
        </span>
    </div>
    <div>
        <span><!-- 内部div换成其他标签即可，本例以span标签为例 -->
            <ul>
                <li></li>
                <li></li>
            </ul>
        </span>
    </div>
    <div>
        <span><!-- 内部div换成其他标签即可，本例以span标签为例 -->
            <ul>
                <li></li>
                <li></li>
            </ul>
        </span>
    </div>
</div>

总结

用原生js编写选项卡或者轮播图时，特别注意div嵌套问题，（加上class=’select’的div内部都不能出现div标签）否则会出现下一部分点击的内容区域，因为加不上select出现问题。