導航欄（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>
           

成果

小白寫的練手練習.