【内部浏览】点击显示内容（类似slider效果）

◇组件名称:

    内部浏览

◇功能描述：

   点击对应的连接会显示对应的内容，效果原理与各大门户的slider一样 。

◇调用方法：

    addLoadEvent(prepareInternalnav);

◇上下文情景：

    各大门户网站可见，信息量很大，在有限的版面显示更多的内容可以使用这个js。

◇工作方式&技术要点

    ·建立函数，使传入的id值的块进行显示，没传入的不显示。
    ·对鼠标点击块的动作事件建立函数，使点击的块的id传入第一个显示函数。

◇关键代码展示

1.对应的id传入后，用于显示块的js

function showSection(id) {
  var divs = document.getElementsByTagName("div");
  for (var i=0; i<divs.length; i++ ) {
    if (divs[i].className.indexOf("section") == -1) continue;
    if (divs[i].getAttribute("id") != id) {
      divs[i].style.display = "none";
    } else {
      divs[i].style.display = "block";
    }
  }
}

2.寻找鼠标点击所连接的块

function prepareInternalnav() {
  if (!document.getElementsByTagName) return false;
  if (!document.getElementById) return false;
  if (!document.getElementById("internalnav")) return false;
  var nav = document.getElementById("internalnav");
  var links = nav.getElementsByTagName("a");
  for (var i=0; i<links.length; i++ ) {
    var sectionId = links[i].getAttribute("href").split("#")[1];
    if (!document.getElementById(sectionId)) continue;
    document.getElementById(sectionId).style.display = "none";
    links[i].destination = sectionId;
    links[i].onclick = function() {
      showSection(this.destination);
      return false;
    }
  }
}

◇DEMO演示

    点此打开DEMO