JS实现点击目录名变换颜色的效果实例
很喜欢一些特效，更喜欢一些企业站的导航点击效果，但是无论自己怎么使用点击效果都是不怎么理想，于是跟这个效果杠上了，最后通过学习JS相关的变幻效果，最后实现了企业站导航栏点击目录名变换颜色的效果实例，下面来分享我的操作代码：
首先我先将我的最终效果展示让大家瞧一瞧：
如上图所示，我们需要实现的效果是当用户点击相应的导航栏的时候，我们可以让相应的导航栏名变换颜色，以提醒用户此刻所处的页面。
下面我就展示一下实现上述碰撞效果的Html和JS代码：
首先来展示一下前端的HTML代码：
<div>
<div>
<ul>
<li><a class="location now" href="{:U('Index/index')}">首页</a></li>
<li><a href="{:U('Index/product')}">产品展示</a></li>
<li><a href="{:U('Index/about')}">关于我们</a></li>
<li><a href="{:U('Index/news')}">新闻资讯</a></li>
<li><a href="{:U('Index/video')}">视频中心</a></li>
<li><a href="{:U('Index/contact')}">联系我们</a></li>
</ul>
</div>
</div>然后我们来展示一下JS代码：
<script type="text/javascript">
$(function () {
var url = decodeURI(location.pathname+location.search);
$(".location").each(function () {
if ($(this).attr('href') == url)
{
$(this).addClass('now')
}else {
$(this).removeClass('now')
}
})
})
</script>3.代码解析：
前端页面：
类名为location now的元素为变换后颜色的标签。
JS代码：
decodeURI():可对 encodeURI() 函数编码过的 URI 进行解码。
location.pathname：得到的结果时浏览器地址栏中的完整地址串。
location.search：得到的是URL路径中?以及?之后的所有内容。
实例解析：
访问的URL路径为：
http://www.zywpro.com/Home/Index/about.html?id=1&name=wdy&password=password
location.pathname得到的结果为：
http://www.zywpro.com/Home/Index/about.html?id=1&name=wdy&password=password
location.search得到的结果为：
?id=1&name=wdy&password=password
each():规定为每个匹配元素规定运行的函数,返回 false 可用于及早停止循环。
实例：
输出每个 li 元素的文本：
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
});
</script>
</head>
<body>
<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>attr():设置或返回被选元素的属性值。attr(一个值的话为返回被选元素的值，两个值为设置被选元素的值)
addClass():向被选元素添加一个或多个类。
removeClass():从被选元素移除一个或多个类。
好了，这个简单的点击导航实现颜色变换的效果实现了，虽然看着很简单，但是里面涉及的前端知识也是不少，所以我们把每一件简单的事情认真做，那么当我们遇到再怎么复杂的事情时，我们也能化复杂为简单，而且我们也可以去更好更快地处理问题！继续加油吧，PHP开发的小伙伴们！
以上是JS实现点击目录名变换颜色的效果实例的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
如何使用JS和百度地图实现地图平移功能
Nov 21, 2023 am 10:00 AM
如何使用JS和百度地图实现地图平移功能百度地图是一款广泛使用的地图服务平台，在Web开发中经常用于展示地理信息、定位等功能。本文将介绍如何使用JS和百度地图API实现地图平移功能，并提供具体的代码示例。一、准备工作使用百度地图API前，首先需要在百度地图开放平台（http://lbsyun.baidu.com/）上申请一个开发者账号，并创建一个应用。创建完成
股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤
Dec 17, 2023 pm 06:55 PM
股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤，需要具体代码示例随着互联网和科技的快速发展，股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环，其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息，帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的
推荐：优秀JS开源人脸检测识别项目
Apr 03, 2024 am 11:55 AM
人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计
PHP与JS开发技巧：掌握绘制股票蜡烛图的方法
Dec 18, 2023 pm 03:39 PM
随着互联网金融的迅速发展，股票投资已经成为了越来越多人的选择。而在股票交易中，蜡烛图是一种常用的技术分析方法，它能够显示股票价格的变化趋势，帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧，带领读者了解如何绘制股票蜡烛图，并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前，我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人
如何使用PHP和JS创建股票蜡烛图
Dec 17, 2023 am 08:08 AM
如何使用PHP和JS创建股票蜡烛图股票蜡烛图是股票市场中常见的一种技术分析图形，通过绘制股票的开盘价、收盘价、最高价和最低价等数据，帮助投资者更直观地了解股票的价格波动情况。本文将教你如何使用PHP和JS创建股票蜡烛图，并附上具体的代码示例。一、准备工作在开始之前，我们需要准备以下环境：1.一台运行PHP的服务器2.一个支持HTML5和Canvas的浏览器3
如何使用JS和百度地图实现地图多边形绘制功能
Nov 21, 2023 am 10:53 AM
如何使用JS和百度地图实现地图多边形绘制功能在现代网页开发中，地图应用已经成为常见的功能之一。而地图上绘制多边形，可以帮助我们将特定区域进行标记，方便用户进行查看和分析。本文将介绍如何使用JS和百度地图API实现地图多边形绘制功能，并提供具体的代码示例。首先，我们需要引入百度地图API。可以利用以下代码在HTML文件中导入百度地图API的JavaScript
如何使用JS和百度地图实现地图热力图功能
Nov 21, 2023 am 09:33 AM
如何使用JS和百度地图实现地图热力图功能简介：随着互联网和移动设备的迅速发展，地图成为了一种普遍的应用场景。而热力图作为一种可视化的展示方式，能够帮助我们更直观地了解数据的分布情况。本文将介绍如何使用JS和百度地图API来实现地图热力图的功能，并提供具体的代码示例。准备工作：在开始之前，你需要准备以下事项：一个百度开发者账号，并创建一个应用，获取到相应的AP
如何使用JS和百度地图实现地图点击事件处理功能
Nov 21, 2023 am 11:11 AM
如何使用JS和百度地图实现地图点击事件处理功能概述：在Web开发中，经常需要使用地图功能来展示地理位置和地理信息。而地图上的点击事件处理是地图功能中常用且重要的一部分。本文将介绍如何使用JS和百度地图API来实现地图的点击事件处理功能，并给出具体的代码示例。步骤：导入百度地图的API文件首先，要在HTML文件中导入百度地图API的文件，可以通过以下代码实现：
