[分享] 实用的结构和行为相分离的标签切换
做前端工作的朋友都知道 网页重构要实现结构（xhtml）、表现（css）、行为（javascript）相分离；
那么为什么要分离呢？我总结了几点，希望大家多提宝贵的意见。
（1）将js与xhtml相分离，使文档结构清晰，美观，也易于代码的管理维护和重用，编好的js文件可以被多个页面调用。
（2）试想一下，如果页面需要大量的触发事件，为了避免使用过多的“onmouseover” “onclick” ，采用分离式编程将是多么的明智，如：obj[i].onclick=fn(){...};
（3）越是大型的项目，分离式开发就显得尤为重要，平时都要养成良好的编程习惯，遇到大的项目才会游刃有余；
（4）有利于团队分工合作，各施其职；xhtml开发和js开发可同步进行，js开发人员只需要xhtml开发人员为其在文档中提过一个“挂钩”和衔接点 如id 或class类 ；
（5）当用户无法或者不愿支持javascrpit时，仍然能够使用基本的功能浏览页面，实现方法首先就是分离式开发；
下面是个示例：
结构和行为相分离的标签切换效果，你只需要给js提供两个“id” 便能实现选项卡的效果；
1.xhtml
<div class="tab" id="nav">
<span>标签1</span>
<span>标签2</span>
<span>标签3</span>
<span>标签4</span>
</div>
<div id="box">
<blockquote>内容一</blockquote>
<blockquote>内容二</blockquote>
<blockquote>内容三</blockquote>
<blockquote>内容四</blockquote>
</div><br />
<div class="tab" id="nav1">
<span>标签1</span>
<span>标签2</span>
<span>标签3</span>
<span>标签4</span>
</div>
<div id="box1">
<blockquote>内容一</blockquote>
<blockquote>内容二</blockquote>
<blockquote>内容三</blockquote>
<blockquote>内容四</blockquote>
</div>
2.css
.tab span{height:20px; line-height:20px; background-color:#CCF; border:#999 1px solid; cursor:pointer;}
.tab span.on{background-color:#3f0c57; color:#FFF;}
blockquote{ background-color:#fbfff3; margin:0; padding:0; border:#CCC 1px solid; width:200px; padding:10px; display:none;}
3.js
function $(id){return document.getElementById(id);}
function start(){
function tab(nav,navele,con,conele){
var navlist=$(nav).getElementsByTagName(navele);
var boxlist=$(con).getElementsByTagName(conele);
for(i=0;i<navlist.length;i++)
{ navlist[0].className="on";
boxlist[0].style.display="block";
(function(n)
{navlist[i].onclick=function()
{
boxhidden();
this.className="on";
boxlist[n].style.display="block";
}
}
)(i)
}
function boxhidden(){
for(y=0,x=0;y<navlist.length,x<boxlist.length;y++,x++){
navlist[y].className="";
boxlist[x].style.display="none";
}
}
}
tab("nav","span","box","blockquote");//传递参数
tab("nav1","span","box1","blockquote");
}
setTimeout("start()",0);
看看效果吧
内容一
内容二
内容三
内容四
内容一
内容二
内容三
内容四
