用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>