简版导航栏实现

来自今日头条线上笔试题

【html:】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>topbarMenu</title>
</head>
<body>
    <ul id="list">
        <li><a href="#">首页</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
    </ul>
</body>
</html>

【scss:】

* {
    padding:0;
    margin:0;
}

body {
    background: #90d1ef;
}

ul {
    background: white;
    border-bottom: 1px solid #ddd;
    padding: 0 100px;

    li{
        display: inline-block;
        text-align: center;
    }
}

a {
    display: inline-block;
    box-sizing: border-box;
    width: 80px;
    height: 60px;
    line-height: 60px;
    text-decoration: none;
    color: #08c;

    &:hover {
        background: #eee;
        border-radius: 4px;
        border: 1px solid #ddd;
        border-bottom: 0px;
    }
}

【jQuery 实现:】

let oList = $('#list');

oList.on('click', 'a', (e) => {
    let $target = $(e.target),
        oLi = oList.children();

    $.each(oLi, (index, item) => {
        $(item).find('a').css('color', '#08c');
    });

    $target.css('color', 'blue');
});

【原生实现：】

let oList = document.getElementById('list');

oList.addEventListener('click', function(e) {
    let target = e.target || e.srcElement;

    if (target.tagName === 'A') {
        let oLi = oList.children;

        for (let i=0; i< oLi.length; i++) {
            oLi[i].children[0].style.color = '#08c';
        }

        target.style.color = 'blue';
    }
}, false);

实现效果：

简版导航栏


posted on 2016-09-26 18:29  Ruth92  阅读(137)  评论(0)  编辑  收藏  举报

导航