导航下划线自动跟踪

其实效果是点击一下他就自动跟过去。第一件事就是css排序。

<nav>
    <div id="btm"></div>
    <a href="javascript:;">Aaron</a>
    <a href="javascript:;">tom</a>
    <a href="javascript:;">jeray</a>
    <a href="javascript:;">Roum</a>
    <a href="javascript:;">Sundy</a>
    <a href="javascript:;">minba</a>
</nav>

<style>
    * {
        transition: all 0.3s;
    }

    nav {
        width: 500px;
        position: relative;
        display: flex;
    }

    nav #btm {
        bottom: -10px;
        height: 3px;
        background: #337ab7;
        position: absolute;
    }

    nav a {
            padding: 20px;
            color: #000;
            padding-bottom: 0;
    }

    nav a:hover {
        text-decoration: none;
        list-style: none;
        color: #E83E8C;
    }
</style>

事件

btm只要一个！所以querySelector
am他全要所以用的SelectorAll
创建一个函数，执行sb时候带上xxx的offset位置

把所有的am进行遍历，然后遍历出来的每一个a点击都会返回一个e
这个e相当于event！遍历出来的什么名字都无所谓
这个e.targe 其实就是为了
xx.target.offsetLeft，只不过sb()成了一个交接点

let btm = document.querySelector("#btm");
let am = document.querySelectorAll("a")

function sb(e) {
    btm.style.width = e.offsetWidth + "px"
    btm.style.left = e.offsetLeft + "px"
}

am.forEach((a) => {
    a.addEventListener("click", e => {
        sb(e.target)
    })
})

am[0].click()