方法一:触发点击事件 选中状态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>
<script type="text/javascript">
hashChangeHandler(); //已进入页面就根据hash值显示,而不是等onchnage事件触发后显示
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>