[分享] 实用的结构和行为相分离的标签切换

做前端工作的朋友都知道 网页重构要实现结构（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; 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);

看看效果吧

标签1 标签2 标签3 标签4

内容一

内容二

内容三

内容四

标签1 标签2 标签3 标签4

内容一

内容二

内容三

内容四