>  Q&A  >  본문

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

哪位大神可以帮忙看下

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

黄舟黄舟2768일 전686

모든 응답(4)나는 대답할 것이다

  • 天蓬老师

    天蓬老师2017-04-11 11:23:39

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

    회신하다
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-11 11:23:39

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

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

    }
    }

    회신하다
    0
  • 天蓬老师

    天蓬老师2017-04-11 11:23:39

    刚撸了一个,去看看

    회신하다
    0
  • 高洛峰

    高洛峰2017-04-11 11:23:39

    可以试试这个,原生写法:

    <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

    회신하다
    0
  • 취소회신하다