简版导航栏实现

来自今日头条线上笔试题

【html:】

• 首页


• Profile


• Messages

【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);

实现效果：