当前位置: 开发笔记 > 前端 > 正文

Js实现当前点击a标签变色突出显示其他a标签回复原色

作者：长江7808 | 来源：互联网 | 2022-03-11 15:20

当一个页面有多个a标签，实现当前点击a标签变色，其他a标签回复原色，具体实现如下，喜欢的朋友可以参考下

当一个页面有多个a标签，且点击后会跳转至当前页面，如何实现被点击标签变色突出显示，其他标签回复原色呢？

利用JS可实现：

假设当前页面是“1.aspx”

1. 给a标签ID设值：

代码如下:

""
""
""

2. 写JS方法：

代码如下:

对于其他情况，如点击a标签页面不跳转，则可以这样写：

代码如下:

推荐阅读

build
Java毕业设计项目：“传情旧物”网站（含源码与数据库）

本项目介绍了如何配置和运行“传情旧物”网站，包括所需的技术栈、环境配置以及具体的操作步骤。 ... [详细]

蜡笔小新 2024-11-15 20:52:51
js
CSS3 动画效果：35款SVG图标加载动画

本文介绍了一种使用CSS3和jQuery实现的35款SVG图标加载动画。这些动画不仅视觉效果出色，还能提升用户体验。通过本文，您可以了解如何在项目中应用这些动画。 ... [详细]

蜡笔小新 2024-11-15 15:01:02
vue
Python 数据可视化实战指南

本文详细介绍如何使用 Python 进行数据可视化，涵盖从环境搭建到具体实例的全过程。 ... [详细]

蜡笔小新 2024-11-13 06:03:30
js
2017年5月9日学习总结

本文记录了2017年5月9日的学习内容，包括技术分享和相关知识点的深入探讨。 ... [详细]

蜡笔小新 2024-11-15 20:58:43
js
Cacti 多核 CPU 监控模板（2、4、8、12、16、24、32 核）

本文章提供了适用于 Cacti 的多核 CPU 监控模板，支持 2、4、8、12、16、24 和 32 核配置。请注意，0.87g 版本的 Cacti 需要手动修改哈希值为 0021 才能使用，而 0.88 及以上版本则可直接导入。 ... [详细]

蜡笔小新 2024-11-15 20:54:45
js
Bootstrap 插件使用指南

本文详细介绍了如何在 Web 前端开发中使用 Bootstrap 插件，包括自动触发插件的方法、插件的引用方式以及具体的实例。 ... [详细]

蜡笔小新 2024-11-15 12:24:25
js
曾国藩《挺经》第七卷：英才

第七卷《英才》强调，即使有良药，若不对症，效果也不如低等药物；即使有贤才，若不适用，效果也不如普通人。文中通过多个比喻，阐述了人才使用的重要性，指出合适的人才在适当的时间和场合才能发挥最大效用。 ... [详细]

蜡笔小新 2024-11-15 10:20:56
js
获取父类参数类型工具类

packagecom.panchan.tsmese.utils;importjava.lang.reflect.ParameterizedType;importjava.lang. ... [详细]

蜡笔小新 2024-11-15 09:33:44
html
jQuery .children() 方法详解

.children() 方法用于获取选中元素的所有直接子元素。此方法仅遍历DOM树的一层，如需遍历多层子元素，请使用 .find() 方法。 ... [详细]

蜡笔小新 2024-11-14 23:50:03
overflow
Java 网站开发指南

本文详细介绍了 Java 网站开发的相关资源和步骤，包括常用网站、开发环境和框架选择。 ... [详细]

蜡笔小新 2024-11-14 22:39:58
js
蒜头君的倒水问题（矩阵快速幂优化）

蒜头君将两杯热水分别倒入两个杯子中，每杯水的初始量分别为a毫升和b毫升。为了使水冷却，蒜头君采用了一种特殊的方式，即每次将第一杯中的x%的水倒入第二杯，同时将第二杯中的y%的水倒入第一杯。这种操作会重复进行k次，最终求出两杯水中各自的水量。 ... [详细]

蜡笔小新 2024-11-14 19:31:55
html
CSS 百分比单位的取值依据是什么

本文详细探讨了 CSS 中百分比单位的取值依据，包括不同定位方式下的包含块概念及其应用。通过具体的示例和代码，帮助读者更好地理解和掌握这一知识点。 ... [详细]

蜡笔小新 2024-11-14 19:09:53
js
Java初学者的一天

本文介绍了Java编程语言的基础知识，包括其历史背景、主要特性以及如何安装和配置JDK。此外，还详细讲解了如何编写和运行第一个Java程序，并简要介绍了Eclipse集成开发环境的安装和使用。 ... [详细]

蜡笔小新 2024-11-14 18:05:41
js
Bootstrap 缩略图展示示例

本文将展示如何使用 Bootstrap 实现缩略图效果，并提供详细的代码示例。 ... [详细]

蜡笔小新 2024-11-14 17:27:35
js
支付平台异步风控系统架构设计

本文介绍了一种支付平台异步风控系统的架构模型，旨在为开发类似系统的工程师提供参考。 ... [详细]

蜡笔小新 2024-11-14 15:21:34

长江7808

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章