在实现多级导航时，会出现各种切换隐藏等功能：
现提供参考代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style>
.on{color: red;}
</style>
<script type="text/javascript">
function changeTab(ind,cou){
if( $("#TabContent"+ind).css("display")=="none"){
for(var i=1;i<cou+1;i++){
if(ind==i){
$("#TabContent"+i).css('display','block');
$("#type"+i).attr("class", "on");
}else{
$("#TabContent"+i).css('display','none');
$("#type"+i).attr("class", "m");
}
}
}else{
for(var i=1;i<cou+1;i++){
$("#TabContent"+i).css('display','none');
$("#type"+i).attr("class", "m");
}
}
}
</script>
</head>
<body>
<nav>
<ul>
//html页面直接利用js页面代码，做以下调整<a href="javascript:changeTab(1,3)">
//其中1为当前页面；3位全部页面；
<li><a href="javascript:changeTab(1,3);" class="m" id="type1">首页</a></li>
<li><a href="javascript:changeTab(2,3);" class="m" id="type2">第二页</a></li>
<li><a href="javascript:changeTab(3,3);" class="m" id="type3">第三页</a></li>
</ul>
</nav>
<div id="TabContent1" style="display: none;">
我是tab1
</div>
<div id="TabContent2" style="display: none;">
我是tab2
</div>
<div id="TabContent3" style="display: none;">
我是tab3
</div>
</body>
</html>
备注：（css（）与attr（）的用法区别）
而attr是设置属性，style/class等也是div标签及其他类似标签的属性；