手把手教你超可爱的导航栏_修饰导航条，php学生管理系统源码

最新推荐文章于 2024-08-05 08:36:15 发布

2401_84187563

最新推荐文章于 2024-08-05 08:36:15 发布

阅读量281

点赞数 4

分类专栏： 2024年程序员学习文章标签： php 前端 javascript

本文链接：https://blog.csdn.net/2401_84187563/article/details/137523450

版权

2024年程序员学习专栏收录该内容

45 篇文章 0 订阅

订阅专栏

文章讲述了如何通过添加自定义数据属性data-index简化导航条元素索引操作，以及利用事件监听实现在鼠标移入、移出和点击时动态调整线条和背景滑块位置。同时提及了提供一套包括Java、Web等在内的计算机毕业设计项目大全，旨在帮助学生高效完成毕业项目。

摘要由CSDN通过智能技术生成

由于导航条中的项目过多，在后面查找对应元素索引时会比较麻烦，所以我们先给所有的列表项添加一个自定义属性data-index来代表他们的索引

let slipAll = document.querySelectorAll('.slipNav nav a');
//给所有的a标签添加index属性，方便后面查找
for (let i = 0; i < slipAll.length; i++) {
    slipAll[i].setAttribute('data-index', i)
}

接下来我们通过监听鼠标移入的位置来计算线的left值，

这里通过事件委托来实现，通过获取触发事件的index属性来计算left值，当鼠标移出导航栏时，由于没有选择其他的项，所以线条需要回到原先被选中元素的位置

//鼠标移入底下的线跟着移动
slipNav.addEventListener('mouseover', function (e) {
    let target = e.target
    let len = 150 \* target.dataset.index + 35;// 计算当前的left值
    line.style.left = len + 'px';
})
//鼠标移出时底下的线回到原来的位置
slipNav.addEventListener('mouseleave', function (e) {
    let selected = document.querySelector('.slipNav .selected')//原先被选中的元素
    let len = 150 \* selected.dataset.index + 35 // 线回到被选择元素的位置
    line.style.left = len + 'px'
})

注意：由于在css代码中设置了过渡属性，所以在改变left值时，不会突变而是一个滑动过程噢！😉

实现功能：点击相应的列表项，背景滑块会切换到所选择的列表项

当我们鼠标点击列表项时，我们需要选中当前元素，背景块需要定位到当前位置！实现方法相同

//鼠标点击时背景颜色的滑块滑倒相应的位置
slipNav.addEventListener('click', function (e) {
    let target = e.target;
    let bgc = document.querySelector('.bgc')
    //排他思想
    for (let i = 0; i < slipAll.length; i++) {
        slipAll[i].classList.remove('selected')
    }
    target.classList.add('selected');// 通过添加类名实现颜色变化
    let len = 150 \* target.dataset.index + 25 // 计算背景滑块left值
    bgc.style.left = len + 'px';
})

完整代码

需要代码可以直接复制噢！

<!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>Document</title>
    <style>
 \* {
 margin: 0;
 padding: 0;
 }

 body {
 background-color: rgb(221, 230, 245);
 }

 a {
 color: inherit;
 text-decoration: none;
 }

 .slipNav {
 width: 920px;
 margin: 100px auto;
 }

 .slipNav a {
 position: relative;
 float: left;
 width: 150px;
 line-height: 50px;
 text-align: center;
 font-size: 18px;
 color: #000;
 z-index: 1;
 }

 .slipNav nav {
 position: relative;
 background-color: white;
 border-radius: 50px;
 }

 .slipNav nav::after {
 content: '';
 display: block;
 clear: both;
 }

 .slipNav nav :hover {
 color: #54a0ff;
 }

 .selected {
 color: white !important;
 }

 .line {
 position: absolute;
 top: 50px;
 left: 35px;
 /\* 线的长宽 \*/
 height: 3px;
 width: 80px;
 background-color: #54a0ff;
 transition: all .3s;
 }

 .bgc {
 position: absolute;
 top: 0px;
 left: 25px;
 /\* 线的长宽 \*/
 height: 50px;
 width: 100px;
 border-radius: 50px;
 background-color: rgb(84, 126, 233);
 transition: all .3s;
 }
 </style>
</head>

<body>
    <div class="slipNav">
        <nav>
            <a href="javascript:;" class="selected">首页</a>
            <a href="javascript:;">我的</a>
            <a href="javascript:;">联系</a>
            <a href="javascript:;">订阅</a>
            <a href="javascript:;">管理</a>
            <a href="javascript:;">相册</a>
            <!-- 底部线条 -->
            <div class="line"></div>
            <!-- 背景滑块 -->
            <div class="bgc"></div>
        </nav>
    </div>
    <script>
 let line = document.querySelector('.line');
 let slipNav = document.querySelector('.slipNav nav');
 let slipAll = document.querySelectorAll('.slipNav nav a');
 //给所有的a标签添加index属性，方便后面查找
 for (let i = 0; i < slipAll.length; i++) {
 slipAll[i].setAttribute('data-index', i)
 }
 //鼠标移入底下的线跟着移动
 slipNav.addEventListener('mouseover', function (e) {
 let target = e.target
 let len = 150 \* target.dataset.index + 35;// 计算当前的left值
 line.style.left = len + 'px';
 })
 //鼠标移出时底下的线回到原来的位置
 slipNav.addEventListener('mouseleave', function (e) {
 let selected = document.querySelector('.slipNav .selected')
 let len = 150 \* selected.dataset.index + 35 // 线回到被选择元素的位置
 line.style.left = len + 'px'
 })
 //鼠标点击时背景颜色的滑块滑倒相应的位置
 slipNav.addEventListener('click', function (e) {
 let target = e.target;
 let bgc = document.querySelector('.bgc')
 //排他思想
 for (let i = 0; i < slipAll.length; i++) {
 slipAll[i].classList.remove('selected')
 }
 target.classList.add('selected');// 通过添加类名实现颜色变化
 let len = 150 \* target.dataset.index + 25 // 计算背景滑块left值
 bgc.style.left = len + 'px';
 })
 </script>
</body>

</html>

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数同学面临毕业设计项目选题时，很多人都会感到无从下手，尤其是对于计算机专业的学生来说，选择一个合适的题目尤为重要。因为毕业设计不仅是我们在大学四年学习的一个总结，更是展示自己能力的重要机会。

因此收集整理了一份《2024年计算机毕业设计项目大全》，初衷也很简单，就是希望能够帮助提高效率，同时减轻大家的负担。