前端设计js+Tab切换可关闭+添加并自动判断是否已打开自动切换当前状态
看了很多别人写的tab切换效果感觉都只是div+js去切换已存在的！有的是添加或删除tab的但是太麻烦了还要改js文件你说是不是很不方便呢，我这个直接修改页面里面的参数就可以了！所以我自己就写了这个功能!谢谢，如果转载请注明出处(http://www.ok22.org)幸凡在线学习网
你自己可以添加菜单但是要注意的是CreateDiv(tabid,url,name) 第一个tabid不能重复，想添加多少个都行。但是太多了不知道会成什么样你自己看！
转自:http://www.ok22.org/art_detail.aspx?id=118（可直接运行）
效果图如下:
<!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>body,html{height:100%;}#div_pannel{height:800px;}*{margin:0;padding:0;}#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;}#div_tab li{float:left;text-align:center;position:relative;list-style:none;}#div_tab li{background:url(http://www.ok22.org/images/t_tab_uselectbg.gif);margin-top:3px;height:23px;}#div_tab li span{background:url(http://www.ok22.org/images/t_tab_uselectbg.gif);height:23px;line-height:23px;}#div_tab li.crent{background:url(http://www.ok22.org/images/t_tab_selectbg.gif);margin-top:2px;height:24px;}#div_tab li.crent span{background:url(http://www.ok22.org/images/t_tab_selectbg.gif);height:24px;line-height:24px;}#div_tab li,#div_tab li.crent{color:#fff;background-repeat:no-repeat;background-position:0 0;}#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;}#div_tab li .menua{color:#000;font-size:12px; text-decoration:none;position:relative;}#div_tab li.crent .menua,#div_tab li .menua:hover{color:#ff0000;}#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;}#div_tab li .win_close{background-position:0 -14px;}#div_tab li .win_close:hover{background-position:0 0;}.clearfix:after {content:"."; display:block;height:0;clear:both; visibility:hidden;} *html .clearfix{height:1%;}*+html .clearfix{height:1%;}.clearfix{display:inline-block;} /* Hide from IE Mac */ .clearfix {display:block;} </style> <script type="text/javascript"> function CreateDiv(tabid, url, name) {///如果当前tabid存在直接显示已经打开的tabif (document.getElementById("div_" + tabid) == null){//创建iframevar 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当前效果并隐藏其显示的divvar 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';}} </script></head><body><a href="javascript:;" onclick="CreateDiv('baidu','http://www.baidu.com','百度')">百度</a> <a href="javascript:;" onclick="CreateDiv('lempon','http://www.lempon.com','领跑者建筑网')">领跑者建筑网</a> <a href="javascript:;" onclick="CreateDiv('ok22','http://www.ok22.org','幸凡在线学习网')">幸凡在线学习网</a><ul id="div_tab"></ul> <div id="div_pannel"></div></body></html>