类似于csdn个人信息页面,先上图
刚进入页面后,“我的相册”对应的区块会显示深红色,并且会显示相应的div内容。然后当我们点击“我的关系后”,
“我的关系”的背景色变成深红色,其他导航背景色是灰色,并且下面对应的div也发生了变化。
html代码
<nav>
<ul>
<li class="special"><a href="#album">我的相册</a></li>
<li><a href="#dynamic">动态</a></li>
<li><a href="#relationship">我的关系</a></li>
<li><a href="#collection">我的收藏</a></li>
</ul>
</nav>
<section id="album">...</section>
<section id="dynamic">...</section>
<section id="relationship">...</section>
<section id="collection">...</section>
JavaScript代码
/*把相应section的id和用户点击的导航栏href值比较,改变各个section的display属性*/
function showSection(id) {
var sections = document.getElementsByTagName("section");
for(var i=0;i<sections.length;i++) {
if(sections[i].getAttribute("id") != id) {
sections[i].style.display = "none";
}else {
sections[i].style.display = "block";
}
}
}
/*把导航栏href和用户点击href比较,改变相应元素的父元素的className*/
function changeColor(id) {
var navs = document.getElementsByTagName("nav");
var links = navs[0].getElementsByTagName("a");
for (var i = 0; i <links.length; i++) {
var sectionId = links[i].getAttribute("href").split("#")[1];
if(sectionId == id){
links[i].parentNode.className = "special";
}else {
links[i].parentNode.className = "";
}
}
}
function getId() {
var navs = document.getElementsByTagName("nav");
var links = navs[0].getElementsByTagName("a");
for (var i = 0; i <links.length; i++) {
//获取导航栏的href值
var secId = links[i].getAttribute("href").split("#")[1];
if (!document.getElementById(secId)) continue;
//设置最初的演示
document.getElementById(secId).style.display = "none";
document.getElementById("album").style.display = "block";
/*这里存在作用域问题,secId是个局部变量,它在getId函数执行期间存在,
到时间处理函数执行的时候就不存在了,故在这里为每个链接创建了一个自定义的属性destination*/
links[i].destination = secId;
links[i].onclick = function() {
showSection(this.destination);
changeColor(this.destination);
return false;
}
};
}