看了很多别人写的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. ????<