js导航栏点击变色

在写导航条时总会遇到点击当前li变色，同级兄弟li无变化这个问题，困扰了我很久。具体思路如下：

1.html+css

<ul>
    <li>首页</li>
    <li>服务</li>
    <li>案例</li>
    <li>客户</li>
    <li>动态</li>
    <li>口碑</li>
    <li>关于</li>
    <li>联系</li>
</ul>

ul {
    width: 800px;
    height: 50px;
    list-style: none;
}
ul li {
    width: 10%;
    height: 100%;
    float: left;
    margin-left: 1%;
    background: cadetblue;
    font-size: 20px;
    text-align: center;
    line-height: 2;
}

2.主要js

//获取每个li
var lis = document.querySelectorAll("ul li");

window.onload = function() {
    //循环每个li
    for (var i = 0; i < lis.length; i++) {
        //每个li点击事件
        lis[i].onclick = function() {
            //再循环一遍li
            for (var j = 0; j < lis.length; j++) {
                //先把所有li的颜色变为黑色（或者清空）;
                lis[j].style.color = "black";
            }
            //当前点击的li颜色改变
            this.style.color = "red";
        }
    }
}

效果显示：