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

最新推荐文章于 2024-07-20 20:00:19 发布

我是我们村的村长

最新推荐文章于 2024-07-20 20:00:19 发布

阅读量1.9k

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/u011555620/article/details/106387857

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

方法一：触发点击事件选中状态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>

我是我们村的村长

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
在同一个页面切换导航栏保持正确选中状态（单页面）

方法一：触发点击事件选中状态class是active，$(function(){ $(".clearfix li").click(function() { $(this).siblings('li').removeClass('active'); // 删除其他兄弟元素的样式 $(this).addClass('active'); // 添加当前元素的样式 });});方法二监听onha...
复制链接

扫一扫

专栏目录