咸鱼前端—js 排他

咸鱼前端—js 排他

排他通俗一点解释，就是监听成立后，所有相关的样式全部清除，在把选中的那个填上样式。

比如导航栏效果：当鼠标经过某个栏目时。所有栏目样式全部重置。然后在你鼠标经过的那个标签中加入样式。代码如下

HMTL代码

<div class="tag" >
    <ul>
        <li><a href="">首页</a></li>
        <li><a href="">介绍</a></li>
        <li><a href="">新闻</a></li>
        <li><a href="">联系我们</a></li>
    </ul>
</div>

CSS代码

        .tag {
            width: 400px;
        }

        li {
            list-style: none;
            float: left;
            margin-left: 20px;
            background-color: #0000ff;
        }

        a {
            text-decoration: none;
            color: #fff;
        }

        .objc {
            background-color: aqua;
        }

JavaScript代码

	//获取所有li元素，添加鼠标经过事件
    var obj = document.getElementsByTagName("li");
    for (var i = 0; i < obj.length; i++) {
        obj[i].onmouseover = function () {
            for (var j = 0; j < obj.length; j++) {
            //不填加样式
                obj[j].className = "";
            }
            //给选中的添加样式
            this.className = "objc";
        };
    }

效果：鼠标经过哪个栏目，哪个栏目就有效果（手动滑稽）

来源：CSDN

作者：咸鱼梦工坊

链接：https://blog.csdn.net/weixin_45020839/article/details/104752059