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>
展开阅读全文

没有更多推荐了,返回首页