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>