javascript控制制作tab选项卡(兼容ie6,FF,chrome等)

今天分享一个javascript制作选项卡的代码。所以自己尝试做了，以前一般都是用CSS做的，现在用js做，虽然很简单，不过要考虑到它的可维护性和可重复性，扩展性就要多考虑一些东西了。
?? 下面是我写的代码：

<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>js控制tab选项卡效果</title>
<style?type="text/css">
?????*{margin:0?auto;padding:0;}
???ul{list-style-type:none;width:200px;height:20px;}
???ul?li{display:block;width:50px;height:20px;float:left;cursor:pointer;}
???.clear{clear:both;}
???#content{position:relative;}
???.tab0,.tab1,.tab2,.tab3,#content{width:200px;height:200px;}
???.tab0,.tab1,.tab2,.tab3{position:relative;}
???.tab0{background:#ccc;display:block;}
???.tab1{background:#06f;display:none;}
???.tab2{background:#f60;display:none;}
???.tab3{background:pink;display:none;}
</style>
</head>
<body>
???<ul?id="menu">
??????<li?style="background:#ccc;"?name="t"?id="t"?onclick="is_click(0);">tab1</li>
??????<li?style="background:#06f;"?name="t"?id="t"?onclick="is_click(1);">tab2</li>
??????<li?style="background:#f60;"?name="t"?id="t"?onclick="is_click(2);">tab3</li>
??????<li?style="background:pink;"?name="t"?id="t"?onclick="is_click(3);">tab4</li>
???</ul>
???<div?class="clear"></div>
???<div?id="content">
???????????<div?name="tab"?id="tab"?class="tab0">0</div>
???????????<div?name="tab"?id="tab"?class="tab1">1</div>
???????????<div?name="tab"?id="tab"?class="tab2">4</div>
???????????<div?name="tab"?id="tab"?class="tab3">3</div>
??</div>
??<script?type="text/javascript">
?????var?li=document.getElementsByName("t");
?????var?divs=document.getElementsByName("tab");
?????function?is_click(i){
????????????for(var?j=0;j<li.length;j++)????{
?????????????????if(j?!=?i){
????????????????????divs[j].style.display="none";
?????????????????}else{
??????????????????????divs[j].style.display="block";
?????????????????}
????????????}
?????}
</script>
</body>
</html>

点击相应的标题就会显示相应的内容。
哈哈，做好了以后去看了看网上其他人做的tab选项卡后，发现还是我的比较简洁，美啊
可是测试的时候我发现了一个问题
没有ID，只有Name的话，IE下getElementsByName()不能工作，而FF正常。
没有Name属性，只有ID的话，IE下getElementsByName()正常，而FF不能工作。
所以我为每一个元素都加上了相同的id和name，这样就兼容了。IE6下也可以完美的工作了
所以，以后如果在遇到用了getElementsByName()，明明有name属性，但在IE中却不能起效，在其他浏览器中却可以起效，不用怀疑，肯定是getElementsByName()这里有问题了，赶紧加个相同值的ID吧!