a到b页面，b页面nav变成选中状态

最新推荐文章于 2023-03-21 14:27:30 发布

dongsdh

最新推荐文章于 2023-03-21 14:27:30 发布

阅读量663

点赞数

本文链接：https://blog.csdn.net/dongsdh/article/details/79924252

版权

前言：应该有更好的实现方式，这里是用加载资源后each()方式实现，可快速完成目前需求，后续再优化hash实现方式

缺点1:要在 header 中 a 标签加 target="_blank" 否则页面header加载部分会“跳动”，体验不好

2:有多少个导航栏，就要加载多少次jquery及index.js及css，是我不想看到的

目录结构

css

.act {
	background: red;
}

html->header.html

<ul>
	<li class="act">
		<a target="_blank" href="index.html">导航1</a>
	</li>
	<li>
		<a target="_blank" href="index2.html">导航2</a>
	</li>
</ul>

js->index.js

$("header").load("html/header.html",function(){
	var url = location.href;  
	console.log(url)
	$("header ul li a").each(function() {  
	    if((url + '/').indexOf($(this).attr('href')) > -1 && $(this).attr('href') != "") {  
	        $(this).parents("li").addClass("act"); //让跳转新页面的栏目成为选中状态  
	    } else {
	        $(this).parents("li").removeClass("act");  
	    }  
	});
});

js->jquery.min.js

此处省略一些字

index.html

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8"/>
		<link rel="stylesheet" type="text/css" href="css/header.css"/>
	</head>
	<body>
		<header>
			<!--index.js传入-->
		</header>
		<div id="main">
			<p>这是导航1的主体内容</p>
		</div>
	</body>
	<script src="js/jquery.min.js"></script>
	<script src="js/index.js"></script>
</html>

index2.html

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8"/>
		<link rel="stylesheet" type="text/css" href="css/header.css"/>
	</head>
	<body>
		<header>
			<!--index.js传入-->
		</header>
		<div id="main">
			<p>这是导航2的主体内容</p>
		</div>
	</body>
	<script src="js/jquery.min.js"></script>
	<script src="js/index.js"></script>
</html>

总结：想把index.html做成一个模板，加载不同的模块，这样css,jquery及业务逻辑的js都需要加载一次，这样做了以后发现刷新后又回到初始状态了（index页面主体内容区默认加载a模块，点击导航B加载b模块，刷新后又回到a模块）。还没找到解决办法。打个记号先

后续再优化hash实现方式

dongsdh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
a到b页面，b页面nav变成选中状态

前言：应该有更好的实现方式，这里是用加载资源后each()方式实现，可快速完成目前需求，后续再优化hash实现方式缺点1:要在 header 中 a 标签加 target="_blank" 否则页面header加载部分会“跳动”，体验不好 2:有多少个导航栏，就要加载多少次jquery及index.js及css，是我不想看到的目录结构css.act { background: red...
复制链接

扫一扫