本文為博主原創，更多好文章請點選這裡

首先我們可以利用javascript指令碼，呼叫對應列表的id來實現動態效果的展示，但是，如果遇到像淘寶一樣的網站，他的選單比較多的情況的時候，我們通過動態繫結的方式就比較麻煩了。
所以，今天給大家介紹一個可以動態設定方式

首先我們先來準備下啦列表

• 在Html中建立對應的列表元素，如下

<ul>
        <li > <a href="#"> 首頁</a>
            <dl style="display: none" id="content-0">
 

                <dt><a href="#">行業新聞</a></dt>
                <dt><a href="#">公司新聞</a></dt>
                <dt><a href="#">國內動態</a></dt>
            </dl>
        </li>
        <li> <a href="#"> 企業新聞</a>
            <dl
 
 style="display: none" id="content-1">
                <dt><a href="#">行業新聞</a></dt>
                <dt><a href="#">公司新聞</a></dt>
                <dt><a href="#">國內動態</a></dt>
            </dl>
        </li>


    </ul
 
>

• 同時你要設定你的<li>標籤下的<dl>標籤的display設定成none（就是把dl整個框架隱藏起來）

接著我們可以來寫js程式碼了

• 寫程式碼之前，我們先來了解下實現原理

  • 通過js獲取<li>標籤的一個集合
  • 然後動態給每個<li>標籤新增一個index（下標）
  • 再次迴圈便利陣列，將每一個<dl>標籤的css屬性置空（如果沒有用到css可以忽略）或者將原文的style標籤下的display再次重新設定成none
  • 找到正在操作的<li>標籤節點，修改他的css屬性或者display屬性

• 下面我們來看看程式碼的實現

<script type="text/javascript">
    window.onload = function () {
        // 1. 獲取所有選項卡LI標籤
        var olis = document.getElementsByTagName("li");
        // 2. 迴圈便利所有的標籤
        for(var i=0; i<olis.length; i++){
            // 3. 給每個li標籤新增一個index
            olis[i].index = i;
            // 4. 動態繫結
            olis[i].onmouseover = function () {
                // 5. 再次迴圈遍歷 或者 找到要操作的層或列表
                for(var j=0; j<olis.length; j++){
//                    olis[j].getElementsByTagName("dl")[0];
                    // 6. 清除和隱藏所有元素的className和div/dl層
//                odl.style.display = "block";
                    document.getElementById("content-"+j).style.display = "none";
                }
                // 7. 顯示選項卡對應的DIV
                document.getElementById("content-"+this.index).style.display="block";
            }

        }
    }
</script>

本文為博主原創，更多好文章請點選這裡