在同一个页面切换导航栏保持正确选中状态（单页面）

最新推荐文章于 2026-04-21 04:54:21 发布

原创最新推荐文章于 2026-04-21 04:54:21 发布 · 2k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

jquery

本文介绍两种实现单页应用(SPA)中导航栏切换时样式动态更新的方法。一是通过点击事件触发，选中状态添加或移除'active'类；二是监听URL变化，依据hash值自动调整导航项样式。

方法一：触发点击事件选中状态class是active，

$(function(){
$(".clearfix li").click(function() {
$(this).siblings('li').removeClass('active'); // 删除其他兄弟元素的样式
$(this).addClass('active'); // 添加当前元素的样式
});
});

方法二

监听onhashChange函数，在url发生变化的时候，截取url后的参数，根据参数判断为哪一个导航栏下的项添加对应样式

eg:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>spa-test</title>
<link href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#/">发现音乐</a>|</li>
<li role="presentation"><a href="#/my">我的音乐</a>|</li>
<li role="presentation"><a href="#/friend">朋友</a></li>
</ul>
</div>
<div class="container" id="contanier">

</div>
</body>

window.onhashchange = hashChangeHandler;

function hashChangeHandler(){
var hash = window.location.hash;
var pathname = hash.substr(1);

if(pathname === '/'){
$.ajax({
type:"get",
url:"./find.html",
async:true,
success:function(data){
console.log(data);
$('#contanier').html(data)
}
});

}else if(pathname === '/my'){
$.ajax({
type:"get",
url:"./my.html",
async:true,
success:function(data){
console.log(data);
$('#contanier').html(data)
}
});
}else if(pathname === '/friend'){
$.ajax({
type:"get",
url:"./friend.html",
async:true,
success:function(data){
console.log(data);
$('#contanier').html(data)
}
});
}

}
</script>
</html>