web前端 | 导航菜单高亮实现 | 事件委托、事件监听

aPurpleBerry

已于 2024-07-17 16:38:42 修改

阅读量242

点赞数 3

分类专栏：前端demo 文章标签：前端 javascript

于 2024-07-17 16:36:32 首次发布

本文链接：https://blog.csdn.net/yavlgloss/article/details/140498069

版权

前端demo 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述

期待效果

点击【首页 / 产品介绍 / 关于我们 / 加入我们 / 新闻动态】，当前元素出现高亮。

静态搭建

HTML

  <div class="nav">
    <div class="logo">LOGO</div>
    <ul>
      <li @click="toHome" class="active">首页</li>
      <li @click="toProduct">产品介绍</li>
      <li @click="toUs">关于我们</li>
      <li @click="toJoin"> 加入我们</li>
      <li @click="toNews">新闻动态</li>
    </ul>
  </div>

CSS(Sass)

这里用了Sass语法

.nav {
  width: 100%;
  height: 70px;
  background-color: white;
  opacity: 0.9;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  align-items: center;
  .logo{
    height: 100%;
    line-height: 70px;
    margin-left: 50px;
    font-size: 16px;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  }
  ul {
    display: flex;
    height: 27px;
    line-height: 27px;
  }
  ul li {
    margin-right: 50px;
  }
  ul > li:hover {
    font-weight: bold;
    border-bottom: 2px solid $bgc-blue;
    cursor: pointer;
    color: $bgc-blue;
  }
}

/*注意这里是单独的高亮效果，是需要用JS动态添加到元素上的*/
.active {
  font-weight: bold;
  border-bottom: 2px solid $bgc-blue;
  cursor: pointer;
  color: $bgc-blue;
}

效果

1、鼠标经过有高亮

第一种方法就是用CSS写

  ul > li:hover {
    font-weight: bold;
    border-bottom: 2px solid $bgc-blue;
    cursor: pointer;
    color: $bgc-blue;
  }

第二种方法用 JS 监听事件mouseenter

2、鼠标点击有高亮

① 点击事件监听

for循环遍历 li 监听事件

//获取所有li元素，注意这里的 lis 是数组
let lis = document.querySelectorAll('.nav ul li')

for(let i=0; i<lis.length; i++) {
  //
  lis[i].addEventListener('click',()=>{
    // 排他思想，干掉别人 移除类active
    document.querySelector('.nav .active').classList.remove('active')
    // 只剩自己
    lis[i].classList.add('active')
  })
}

② 事件委托

委托给 li 的父元素 ul，因为 ul 只有一个

// 1 获取ul父元素
const ul = document.querySelector('.nav ul')
// 2 添加事件
ul.addEventListener('click', (e)=>{
  // e.target点击的对象
  console.log(e.target);
  // 点击对象的标签名
  console.log(e.target.tagName);
  if(e.target.tagName === 'LI') {
    // 排他思想 移除原来的active
    document.querySelector('.nav .active').classList.remove('active')
    //首先，对于纯JS，这里的this指向UL，不是li
    //其次，我是在vue3 setup中写的这个逻辑，没有this了
    e.target.classList.add('active')
  }
})