一个我目前认为很实用的JS，实现点击导航切换页面导航文字变色

最新推荐文章于 2025-05-27 08:43:37 发布

DS0324

最新推荐文章于 2025-05-27 08:43:37 发布

阅读量1.3k

点赞数 28

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/DS0324/article/details/134655429

文章描述了如何使用JavaScript处理HTML中的导航链接，当用户点击链接时改变被选中链接的样式，实现高亮效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

外部JS：

// 处理第一个和第二个路径下的链接

const links1 = document.querySelectorAll('.nav .nav_ul li a');

const links2 = document.querySelectorAll('.nav .nav_ul_1 li a');

const allLinks = [...links1, ...links2]; // 合并两组链接为一个数组

let lastClickedLink = null;

allLinks.forEach(link => {

link.addEventListener('click', function () {

if (lastClickedLink !== this) {

// 如果当前点击的标签不同于上一次点击的标签，则进行样式更新

if (lastClickedLink !== null) {

lastClickedLink.classList.remove('active');

}

this.classList.add('active');

lastClickedLink = this;

}

});

const firstLink = allLinks[0];

if (firstLink) {

firstLink.classList.add('active'); // 添加 active 类来表示点击状态

lastClickedLink = firstLink; // 更新 lastClickedLink 变量

}

网页结构：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

<li>

</li>

<li>

</li>

</ul>

</div>

</body>

</html>

网页样式：

.nav {

display: flex;

margin: 0px 0px;

width: 100%;

height: 120px;

background-image: url(../images/background_0.png);

background-size: cover;

overflow: hidden;

z-index: 1;

}

.nav .nav_ul {

margin-left: 40%;

width: 528px;

height: 100%;

display: flex;

overflow: hidden;

z-index: 2;

}

.nav .nav_ul li {

width: 88px;

height: 100%;

display: flex;

overflow: hidden;

z-index: 2;

}

.nav .nav_ul li a {

width: 88px;

height: 100%;

font-size: 14px;

color: #ffffff;

display: flex;

justify-content: center; /* 水平居中 */

align-items: center;

z-index: 2;

transition: color 0.3s; /* 添加过渡效果 */

}

.nav .nav_ul li a.active {

color: red; /* 鼠标点击后的文本颜色 */

}

.nav .nav_ul_1 {

width: 140px;

height: 100%;

margin-left: 8%;

display: flex;

overflow: hidden;

z-index: 2;

}

.nav .nav_ul_1 li {

width: 70px;

height: 100%;

overflow: hidden;

display: flex;

z-index: 2;

}

.nav .nav_ul_1 li a {

width: 70px;

height: 100%;

font-size: 14px;

color: #ffffff;

display: flex;

justify-content: center; /* 水平居中 */

align-items: center;

z-index: 2;

transition: color 0.3s; /* 添加过渡效果 */

}

.nav .nav_ul_1 li a.active {

color: red; /* 鼠标点击后的文本颜色 */

}

注释:这里的图片仅为背景，不影响效果

公用样式：

margin: 0;

padding: 0;

}

body{

font-family: Arial, Verdana, "Microsoft yahei", "Pingfang SC", Simsun;

}

ul,li,ol{

list-style: none;

}

.clears{

clear: both;

height: 0;

overflow: hidden;

font-size: 0;

line-height: 0;

}

text-decoration: none;

}

table{

border-collapse: collapse;

}

button{

cursor: pointer;

}

input, button, textarea, select{

outline:none;

}

textarea{

resize: none;

}

button[type="submit"]{

border: none;

border-radius: 10px;

}

div {

display: block;

}

实现效果：

20231127_214738