javascript 基础 模块展开 2017年1月24日

//展示 提取section数组 如果id不相同 则隐藏 因为有for 所以另外一个第二次循环会关闭
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";
        }
    }
}

function prepareInternalnav() {
    if(!document.getElementsByTagName) return false;
    if(!document.getElementById) return false;
    var articles = document.getElementsByTagName("article");
    if(articles.length == 0) return false; //用等于 别用<1 不会是负数
    var navs = articles[0].getElementsByTagName("nav"); //要时刻注意这里必须加[0] tagname是数组
    if(navs.length == 0) return false;
    var nav = navs[0];
    var links = nav.getElementsByTagName("a"); //取得article下nav下的所有a 组成的数组

    for(var i=0 ; i<links.length ; i++){
        var section_id = (links[i].getAttribute("href").split("#"))[1]; //对字符串进行拆分 本来是带# 无法传入方法
        if(!document.getElementById(section_id)) continue; //确保能找到 否则进行下次循环
        document.getElementById(section_id).style.display = "none"; // 初始化隐藏
        // 开始添加事件
        links[i].destination = section_id;
        links[i].onclick = function () {
            showSection(this.destination);
            return false; // fn内用this的原因是 再出发这个函数时 循环早就执行完毕 这时的link[i] 永远都是最后一个 你用this 就是当前的对象
                        //这里不能直接用section_id 也不能用links[i].destination 都是JS加载过程中 先触发立即执行的代码 再触发事件 事件的变量没找到回去上一级的变量 逐级寻找
        }

    }
}

array = string.split(character)
将一个字符串切割成两部分 从character作为切割点 这个点忽略 前面的是数组的[0] 后面的为[1]