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

Question

哪位大神可以帮忙看下

<div 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></div>

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

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