【www.gdgbn.com--js教程】

每次显示切换，实则只在上一次所显示的和这一次要显示的这二者之间进行切换，但上面这两种被广泛采用的代码，在逻辑上等于脑残，都是对所有关联显示区进行统一隐藏后再显示这次要显示的。对于每个语句的执行机理有所认识的人，会很明确地感受到这种垃圾代码对硬件的摧残和对执行效率的浪费，尤其要切换的显示区数量越多，摧残和浪费越严重。

html代码

内容一
内容二
内容三

 www.111cn.net内容部分第一区
 内容部分第二区
 内容部分第三区

js写法一

var zl_标签=function(obj,classname,contentid){
 if(this.oldobj!=undefined){
  //非第一次调用时,先恢复上次操作对象样式和隐藏其关联div
  this.oldobj.classname=this.oldstyle;
  document.getelementbyid(this.oldcontentid).style.display="none";
 }
 //进行本次(包括第一次)操作
 //先保存本次环境
 this.oldobj=obj;this.oldstyle=obj.classname;this.oldcontentid= contentid;
 //设置本次显示
 obj.classname=classname;
 document.getelementbyid(contentid).style.display="block";
};

简单写法

function divswitch(tarnode, nodenum) {
 var node = document.getelementbyid(tarnode);
 if (window.activexobject) {
  for (var i = 0; i < node.childnodes.length; i++) {
   node.childnodes[i].style.display = "none";
  }
  node.childnodes[nodenum].style.display = "block";
 } else {
  for (var i = 0; i < node.childnodes.length; i++) {
   if (node.childnodes[i].nodetype == 1 && node.childnodes[i].nodetype != 3) {
    node.childnodes[i].style.display = "none";
   }
  }
  node.childnodes[nodenum + 1].style.display = "block";
 }
}

带有css教程样式的写法

function showtab(name, num, n) {
 for (i = 1; i <= n; i++) {
  var menu = document.getelementbyid(name + i);
  var con = document.getelementbyid("show_" + name + "_" + i);
  menu.classname = i == num ? name + "_btn_show": name + "_btn_normal";
  con.style.display = i == num ? "block": "none";
  con.classname = i == num ? name + "_text_show": name + "_text_normal";
 }
}

本文来源：http://www.gdgbn.com/wangyezhizuo/27852/