javascript - 头部导航条的js点击事件循环

Question

哪位大神可以帮忙看下

<p class="header">
    <ul class="header-nav">
      <li id="list_1">全部</li>
      <li id="list_2">待付款</li>
      <li id="list_3">待发货</li>
      <li id="list_4">待确认</li>
      <li id="list_5">已完成</li>
    </ul>
</p>

头部导航怎样做出这样的效果？图片描述

点击哪个li标签哪个黑色线条出现在哪个li标签的底部，用循环的方式

Answer 1

用jquery实现如下，操作简单一些，原生dom要看晕了
<style>
ul li{
text-align:center;
float:left;
list-style:none;
width:100px;
border:3px solid transparent;
cursor:pointer;
}
.active{
border-bottom:3px solid #333;
}
.hide{
border-bottom:3px solid transparent;
}
</style>

   <ul class="header-nav">
    <li id="list_1">全部</li>
    <li id="list_2">待付款</li>
    <li id="list_3">待发货</li>
    <li id="list_4">待确认</li>
    <li id="list_5">已完成</li>
</ul>
<script src="js/jquery-1.12.4.js"></script>
<script>
    $("ul>li").each(function(i,element){
        element.onclick=function(){
            $(this).addClass("active").siblings().removeClass('active');
        }
    });
    
    
</script>

Answer 2

获取导航条
var oNav = document.getElementsByClassName('header-nav')[0];
oNav.onclick = function(e){
var target = e.target || e.srcElement;
if(target.nodeName =='Li'){

 //这里就是所点中li的操作

}
}

Answer 3

刚撸了一个，去看看

Answer 4

可以试试这个，原生写法：

<p class="header">
    <ul class="header-nav">
        <li id="list_1">全部</li>
        <li id="list_2">待付款</li>
        <li id="list_3">待发货</li>
        <li id="list_4">待确认</li>
        <li id="list_5">已完成</li>
    </ul>
</p>

.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