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

问题描述

问 题

哪位大神可以帮忙看下

<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标签的底部，用循环的方式

解决方案

用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>

这篇关于javascript - 头部导航条的js点击事件循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！