导航栏实现点击跳转页面，选中的标签改变底色

最新推荐文章于 2023-11-21 08:53:51 发布

꧁༺蓝冰༻꧂

最新推荐文章于 2023-11-21 08:53:51 发布

阅读量1.6k

点赞数 2

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

本文链接：https://blog.csdn.net/weixin_46664972/article/details/122476976

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

思路：通过获取a标签的href和地址栏的url进行匹配，如果一样则添加class属性给a标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>lvnian学习(http://lvnian.blog.51cto.com/)</title>
		<style>
			.nav_menustyle_1_2 a:hover {
				background: #0D6BB1;
			}

			.blue {
				background: #0D6BB1;
			}
		</style>
	</head>
	<body>
		<div class="nav_menustyle_1_2">
			<ul>
				<li>
					<a href="text.html">
						通知公告
					</a>
				</li>
				<li>
					<a href="b">
						资源动态
					</a>
				</li>
				<li>
					<a href="c">
						培训讲座
					</a>
				</li>
			</ul>
		</div>

		<div class="l">
			<ul>
				<li>
					<a href="dd">
						d
					</a>
				</li>

			</ul>
		</div>
	</body>
	<script src="jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			var url = window.location.href;
			var url1;
			$('.nav_menustyle_1_2 a').each(function() {
				url1 = $(this).attr('href')
				if (url.lastIndexOf(url1) != -1) {
					$(this).addClass('blue');
				}
			});
		});
	</script>
</html>

꧁༺蓝冰༻꧂

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
导航栏实现点击跳转页面，选中的标签改变底色

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>lvnian学习(http://lvnian.blog.51cto.com/)</title> <style> .nav_menustyle_1_2 a:hover { background: #0D6BB1; } .blue { background: #
复制链接

扫一扫