JavaScript实现同一页面不同div的切换及颜色改变

类似于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;
        }

    };
}