js 点击事件，出现背景颜色

用CSS:focus选择器
单单这样子还不行，得使用tabindex，让元素能够获取焦点。
示例代码：
html

<div>
    <ul>
        <li style="float:left;" class="navList" tabindex="1">首页</li>
        <li style="float:left;" class="navList" tabindex="2">航线展示</li>
        <li style="float:left;" class="navList" tabindex="3">海域水域监测</li>
        <li style="float:left;" class="navList" tabindex="4">海水质量控制</li>
        <li style="float:left;" class="navList" tabindex="5">海洋灾害预警</li>
    </ul>
</div>

CSS

.navList:focus{
    background: red;
}

但我想让默认选中首页，这样使用focus伪类，我没弄出来，后来使用了jQuery的siblings()方法来实现此功能（siblings()方法返回被选元素的所有同胞元素）。
示例代码
html（在首页那添加默认的背景颜色）

<div>
    <ul>
        <li style="float:left;background:red" class="navList">首页</li>
        <li style="float:left;" class="navList" >航线展示</li>
        <li style="float:left;" class="navList">海域水域监测</li>
        <li style="float:left;" class="navList">海水质量控制</li>
        <li style="float:left;" class="navList">海洋灾害预警</li>
    </ul>
</div>

jQuery

<script>
    $(document).ready(function(){
        var navList=document.getElementsByClassName("navList");
        for(let i=0;i<navList.length;i++){
            navList[i].onclick = function(){
                this.style.backgroundColor = "red";
                for (var i = 0; i < $(this).siblings().length; i++) {
                    $(this).siblings().css("background","");
                }
            }  

        }
    }); 
</script>