5、tab切换案例

<script>
    var titles = document.querySelectorAll("#title>li")
    var contents = document.querySelectorAll("#content>li")
    // 循环遍历标题
    for (var i = 0; i < titles.length; i++) {
        titles[i].onclick = function () {
            for (var j = 0; j < titles.length; j++) {
                // 判断单击的是否是当前的标题
                if (this == titles[j]) {
                    this.style.backgroundColor = "pink"
                    // 因为标题跟内容的索引一样
                    contents[j].style.display = "block"
                } else {
                    titles[j].style.backgroundColor = "aqua"
                    contents[j].style.display = "none"
                }
            }
        }
    }
</script>