导航栏（javascript和jQuery）

用原生JavaScript和JQuery两种写法实现点击导航栏切换效果

html代码

<nav id="nav">
    <ul>
        <li><a href="javascript:void(0);">首页</a></li>
        <li><a href="javascript:void(0);">第二页</a></li>
        <li><a href="javascript:void(0);">第三页</a></li>
        <li><a href="javascript:void(0);">第四页</a></li>
    </ul>
</nav>

css代码

* { 
    margin: 0;
    padding: 0;
}
nav ul li {
    list-style-type: none;
    float: left;
    text-align: center;
}
nav ul li a {
    display: block;
    width: 100px;
    height: 40px;
    line-height: 40px;
    background: #757575;
    font-size: 18px;
    color: #fff;
    text-decoration: none;
}
nav ul li a:hover {
    background: #9E9E9E;
    color: #FFD54F;
}
nav ul li a.active {
    color: #FFD54F;
    background: #9E9E9E;
}

JavaScript原生代码

<script>
    var oA = document.getElementsByTagName("a");
    var i;
    for( i = 0; i < oLi.length; i++) {
        oA[i].onclick = function() {
            for( var n = 0;n < oLi.length; n++){
                oA[n].className = "";
            }
            this.className = "active";
        }
    }
</script>

jQuery代码

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(function(){
        $("a").click(function(){
            $(this).addClass("active").parent().siblings().children().removeClass("active");
        })
    })
</script>

成果

小白写的练手练习.