排他思想

時間 2021-06-03

標籤學習 this spa code 圖片 get function 简体版

原文原文鏈接

在剛學習JavaScript的時候咱們都用原生js寫過簡單的相似tab選項卡功能，如頁面上有5個元素，點擊哪一個元素就讓該元素的背景顏色變成紅色，其餘元素變成白色。如圖：
學習

<style>
    body,div{
        margin: 0;
        padding: 0;
    }
    ul{
        overflow: hidden;
    }
    li{
        float: left;
        padding: 0 15px;
        height: 40px;
        line-height: 40px;
        border: 1px solid #f00;
        margin-right: 10px;
        list-style-type: none;
    }
</style>

<body>
    <ul id="jiaban">
        <li>我是第1個li</li>
        <li>我是第2個li</li>
        <li>我是第3個li</li>
        <li>我是第4個li</li>
        <li>我是第5個li</li>
    </ul>
    <script>
        window.onload = function (){
            var lis = document.getElementById("jiaban").getElementsByTagName("li");
            for(var i = 0, len = lis.length; i < len; i ++){
                lis[i].onclick = function (){
                    // 一、先將其餘的li的背景顏色設置爲白色
                    for(var j = 0; j < len; j++){
                        lis[j].style.background = "white";
                    }
                    // 二、再將當前li(本身)設置爲紅色
                    this.style.background = "red";
                }
            }
        }
    </script>
</body>

我是使用這種排他思想的方式實現，大家是怎麼實現的呢？this

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。