JavaScript实现导航栏点击下划线效果

温鱼粥

已于 2022-08-23 21:24:42 修改

阅读量1.8k

点赞数 2

分类专栏： HTML JavaScript学习文章标签： javascript

于 2022-08-22 16:23:37 首次发布

本文链接：https://blog.csdn.net/u014509544/article/details/126459433

版权

HTML 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

JavaScript学习

1 篇文章 0 订阅

订阅专栏

第一种方法，添加下边框，缺点是，长度跟每个li一样，可能不是想要的效果

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Doucment</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .nav {
      position: relative;
      width: 400px;
      margin: 50px auto;
    }

    .nav ul {
      list-style: none;
    }

    li {
      display: inline-block;
      color: gray;
      width: 66px;
      height: 30px;
    }

    .current {
      color: black;
    }
  </style>
</head>

<body>
  <div class="nav">
    <ul>
      <li class="current">全网热卖</li>
      <li>小米影像</li>
      <li>百度百科</li>
      <li>视频专区</li>
      <li>品牌图片</li>
    </ul>
  </div>
  <script>
    let li = document.querySelectorAll('ul li');
    for (let index = 0; index < li.length; index++) {
      //内层循环排他思想，当点击时把所有li底边框清除，再给点击的添加
      li[index].addEventListener('click', function () {
        for (let i = 0; i < li.length; i++) {
          li[i].style.borderBottom = 'none';

        }
        this.style.borderBottom = '3px solid red';
      })

    }

  </script>
</body>

</html>

第二种方法，单独定义可控制长短
html结构如下

  <div class="nav">
    <ul>
      <li class="current">全网热卖</li>
      <li>小米影像</li>
      <li>百度百科</li>
      <li>视频专区</li>
      <li>品牌图片</li>
    </ul>
    <span class="underline"></span>
  </div>

css代码

 <style>
    * {
      margin: 0;
      padding: 0;
    }

    .nav {
      position: relative;
      width: 400px;
      margin: 50px auto;
    }

    .nav ul {
      list-style: none;
      border: 1px solid red;
    }

    li {
      display: inline-block;
      color: gray;
      width: 66px;
      height: 30px;
      border-radius: 3px;
      border: 1px solid blue;
    }

    .current {
      color: black;
    }

    .underline {
      position: absolute;
      bottom: 5px;
      /* left: 15px; */
      display: block;
      width: 30px;
      height: 3px;
      border-radius: 1.5px;
      background-color: black;
    }
  </style>

JavaScript代码
current类是点击时字体颜色变化，采用classList方法添加，优点是不会覆盖类，如果采用 setAttribute(‘class’,‘current’)或者className='current’方法会覆盖之前的类只留下当前类，

 let lis = document.querySelectorAll('li');
    let underline = document.querySelector('.underline');
    for (let index = 0; index < lis.length; index++) {
      lis[index].onclick = function () {
        for (let i = 0; i < lis.length; i++) {
          lis[i].classList.remove('current');
        }
        this.classList.add('current');
        underline.style.left = this.offsetLeft + 'px';
      }
    };

此时的效果是这样的，横线并没有居中
在这里插入图片描述
实现居中也很简单，先获取li的宽度也就是蓝色盒子的宽度，然后获取横线的宽度，两者相减再除2，就是还要偏移的量，完整的js代码

let lis = document.querySelectorAll('li');
    let underline = document.querySelector('.underline');
    for (let index = 0; index < lis.length; index++) {
      lis[index].onclick = function () {
        for (let i = 0; i < lis.length; i++) {
          lis[i].classList.remove('current');
        }
        this.classList.add('current');
        //还要偏移的量temp
        let temp = (this.offsetWidth - underline.offsetWidth) / 2
        underline.style.left = temp + this.offsetLeft + 'px';
      }
    };