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

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

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

???{
????//创建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';
???}
??
??}????</script>?? </head>?? <body>?? ????<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>?? ????<ul?class="clearfix"?id="div_tab"></ul>??? ????<div?id="div_pannel"></div>??? </body>?? </html>??

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

前端设计js+Tab切换可封闭+添加并自动

热点推荐