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出現問題。