方法一：觸發點擊事件 選中狀態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>