前言:应该有更好的实现方式,这里是用加载资源后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实现方式