84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
哪位大神可以帮忙看下
全部 待付款 待发货 待确认 已完成
头部导航怎样做出这样的效果？图片描述
点击哪个li标签哪个黑色线条出现在哪个li标签的底部，用循环的方式
人生最曼妙的风景，竟是内心的淡定与从容！
用jquery实现如下，操作简单一些，原生dom要看晕了 全部 待付款 待发货 待确认 已完成
获取导航条var oNav = document.getElementsByClassName('header-nav')[0];oNav.onclick = function(e){var target = e.target || e.srcElement;if(target.nodeName =='Li'){
//这里就是所点中li的操作
}}
刚撸了一个，去看看
可以试试这个，原生写法：
.header-nav{ list-style-type: none; background-color: #fff; display: inline-block; padding-left: 0; border-bottom: 8px solid #e2e2e2; } .header-nav li{ display: inline; padding: 10px; line-height: 32px; cursor: pointer; } .header-nav li.active{ border-bottom: 5px solid #000; }
var lis = [].slice.apply(document.querySelectorAll('.header-nav li')); document .querySelector('.header-nav') .addEventListener('click', function(e){ lis.forEach(function(li){ li.classList.remove('active'); }); e.target.classList.add('active'); }, false);
线上示例可以看：jsFiddle
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
获取导航条
var oNav = document.getElementsByClassName('header-nav')[0];
oNav.onclick = function(e){
var target = e.target || e.srcElement;
if(target.nodeName =='Li'){
}
}
刚撸了一个，去看看
可以试试这个，原生写法：
线上示例可以看：jsFiddle