利用javascript点击当前文字时改变颜色

<style>
        body {
            margin: 0;
        }
        
        header {
            width: 100%;
            background: #333;
            color: #eee;
        }
        
        nav {
            overflow: hidden;
        }
        
        span {
            float: left;
            line-height: 50px;
            margin: 0 15px;
            cursor: pointer;
        }
    </style>

<header>
        <nav>
            <span>Lorem.</span>
            <span>Explicabo.</span>
            <span>Harum?</span>
            <span>Delectus?</span>
            <span>Commodi.</span>
            <span>Ullam!</span>
            <span>Tempora!</span>
        </nav>
    </header>

利用双重for循环 

<script>
        var sp = document.querySelectorAll('header nav span')

        for (var i = 0; i < sp.length; i++) {
            sp[i].onclick = function() {
                for (var j = 0; j < sp.length; j++) {
                    sp[j].style.color = ''
                }
                this.style.color = 'red'
            }
        }
    </script>