前端设计js+Tab切换可封闭+添加并自动判断是否已打开自动切换当前状态

看了很多别人写的tab切换效果感觉都只是div+js去切换已存在的！有的是添加或删除tab的但是太麻烦了还要改js文件你说是不是很不方便呢，我这个直接修改页面里面的参数就可以了！所以我自己就写了这个功能!谢谢，如果转载请注明出处(http://www.ok22.org)幸凡在线学习网
?你自己可以添加菜单但是要注意的是CreateDiv(tabid,url,name) 第一个tabid不能重复，想添加多少个都行。但是太多了不知道会成什么样你自己看！

?

1. <!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">??
2. <html?xmlns="http://www.w3.org/1999/xhtml">??
3. <head?runat="server">??
4. ????<title>前端设计js+Tab切换可关闭+添加并自动判断是否已打开自动切换当前状态</title>??
5. ????<style>??
6. ????body,html{height:100%;} ??
7. ????#div_pannel{height:800px;} ??
8. ????*{margin:0;padding:0;} ??
9. ????#div_tab{background:#fff?url(http://www.ok22.org/images/t_tab_bg.gif)?repeat-x?0?bottom;height:26px;padding:15px?15px?0;margin-bottom:10px;overflow:hidden;} ??
10. ????#div_tab?li{float:left;text-align:center;position:relative;list-style:none;}???? ??
11. ????#div_tab?li{background:url(http://www.ok22.org/images/t_tab_uselectbg.gif);margin-top:3px;height:23px;} ??
12. ????#div_tab?li?span{background:url(http://www.ok22.org/images/t_tab_uselectbg.gif);height:23px;line-height:23px;}?? ??
13. ????#div_tab?li.crent{background:url(http://www.ok22.org/images/t_tab_selectbg.gif);margin-top:2px;height:24px;} ??
14. ????#div_tab?li.crent?span{background:url(http://www.ok22.org/images/t_tab_selectbg.gif);height:24px;line-height:24px;}? ??
15. ????#div_tab?li,#div_tab?li.crent{color:#fff;background-repeat:no-repeat;background-position:0?0;}?? ??
16. ????#div_tab?li?span,#div_tab?li.crent?span{display:inline-block;padding:0?36px?0?15px;background-repeat:no-repeat;background-position:right?bottom;}??? ??
17. ????#div_tab?li?.menua{color:#000;font-size:12px;?text-decoration:none;position:relative;} ??
18. ????#div_tab?li.crent?.menua,#div_tab?li?.menua:hover{color:#ff0000;} ??
19. ????#div_tab?li?.win_close,#div_tab?li.crent?.win_close{width:14px;height:14px;position:absolute;top:4px;right:5px;cursor:pointer;display:block;overflow:hidden;background:url(http://www.ok22.org/images/t_delete_ico.gif)?no-repeat;}????? ??
20. ????#div_tab?li?.win_close{background-position:0?-14px;} ??
21. ????#div_tab?li?.win_close:hover{background-position:0?0;}?? ??
22. ????.clearfix:after?{content:".";?display:block;height:0;clear:both;?visibility:hidden;}? ??
23. ????*html?.clearfix{height:1%;} ??
24. ????*+html?.clearfix{height:1%;} ??
25. ????.clearfix{display:inline-block;}? ??
26. ????/*?Hide?from?IE?Mac?*/? ??
27. ????.clearfix?{display:block;}? ??
28. ????</style>??
29. ????<script?type="text/javascript">??????? ??
30. ????????function CreateDiv(tabid, url, name)
    ?? {
    ???///如果当前tabid存在直接显示已经打开的tab
    ???if (document.getElementById("div_" + tabid) == null)
    ???{
    ????//创建iframe
    ????var box = document.createElement("iframe");
    ????box.id = "div_" + tabid;
    ????box.src = url;
    ????box.height = "100%";
    ????box.frameBorder = 0;
    ????box.width = "100%";
    ????document.getElementById("div_pannel").appendChild(box);
    ??
    ????//遍历并清除开始存在的tab当前效果并隐藏其显示的div
    ????var tablist = document.getElementById("div_tab").getElementsByTagName('li');
    ????var pannellist = document.getElementById("div_pannel").getElementsByTagName('iframe');
    ????if (tablist.length > 0)
    ????{
    ?????for (i = 0; i < tablist.length; i++)
    ?????{
    ??????tablist[i].className = "";
    ??????pannellist[i].style.display = "none";
    ?????}
    ????}
    ??
    ????//创建li菜单
    ????var tab = document.createElement("li");
    ????tab.className = "crent";
    ????tab.id = tabid;
    ????var litxt = "<span><a href=\"javascript:;\" onclick=\"javascript:CreateDiv('" + tabid + "','" + url + "','" + name + "')\" title=" + name + " class=\"menua\">" + name + "</a><a onclick=\"RemoveDiv('" + tabid + "')\" class=\"win_close\" title=\"关闭当前窗口\"><a></span>";
    ????tab.innerHTML = litxt;
    ????document.getElementById("div_tab").appendChild(tab);
    ???}
    ???else
    ???{
    ????var tablist = document.getElementById("div_tab").getElementsByTagName('li');
    ????var pannellist = document.getElementById("div_pannel").getElementsByTagName('iframe');
    ????//alert(tablist.length);
    ????for (i = 0; i < tablist.length; i++)
    ????{
    ?????tablist[i].className = "";
    ?????pannellist[i].style.display = "none"
    ????}
    ????document.getElementById(tabid).className = 'crent';
    ????document.getElementById("div_" + tabid).style.display = 'block';
    ???}
    ??}
    ??function RemoveDiv(obj)
    ?? {
    ???var ob = document.getElementById(obj);
    ???ob.parentNode.removeChild(ob);
    ???var obdiv = document.getElementById("div_" + obj);
    ???obdiv.parentNode.removeChild(obdiv);
    ???var tablist = document.getElementById("div_tab").getElementsByTagName('li');
    ???var pannellist = document.getElementById("div_pannel").getElementsByTagName('iframe');
    ???if (tablist.length > 0)
    ???{
    ????tablist[tablist.length - 1].className = 'crent';
    ????pannellist[tablist.length - 1].style.display = 'block';
    ???}
    ??
    ??}
31. ????</script>??
32. </head>??
33. <body>??
34. ????<a?href="#"?onclick="CreateDiv('baidu','http://www.baidu.com','百度')">百度</a>??<a?href="#"?onclick="CreateDiv('lempon','http://www.lempon.com','领跑者建筑网')">领跑者建筑网</a>??<a?href="#"?onclick="CreateDiv('ok22','http://www.ok22.org','幸凡在线学习网')">幸凡在线学习网</a>??
35. ????<ul?class="clearfix"?id="div_tab"></ul>?<!--菜单列表?-->??
36. ????<div?id="div_pannel"></div>?<!--新iframe列表-->??
37. </body>??
38. </html>??

来自(http://www.ok22.org/art_detail.aspx?id=118)