精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (1)
|
|
---|---|
作者 | 正文 |
发表时间:2011-02-15
最后修改:2011-03-12
你自己可以添加菜单但是要注意的是CreateDiv(tabid,url,name) 第一个tabid不能重复,想添加多少个都行。但是太多了不知道会成什么样你自己看!(tab+iframe) 大家可以浏览我的网址来查看效果!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存在直接显示已经打开的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'; } } </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> 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2011-02-16
没人回复我自己回复一下!
|
|
返回顶楼 | |
发表时间:2011-02-16
搞个JS还是压缩的,懒得看
|
|
返回顶楼 | |
发表时间:2011-02-16
原来是这样啊!
|
|
返回顶楼 | |
发表时间:2011-02-21
还行..支持下原创
|
|
返回顶楼 | |
发表时间:2011-02-22
样式做的还不错,如果最上面的一行字美化下“百度 领跑者建筑网 幸凡在线学习网”,整体上看起来效果会更好。
我在OPERA上测试,会出现两个滚动条,这点有待增强。 |
|
返回顶楼 | |
发表时间:2011-02-22
以下是IE7中的效果、、、、
难道是我人品问题??? |
|
返回顶楼 | |
发表时间:2011-02-28
最后修改:2011-03-08
lxs647 写道
以下是IE7中的效果、、、、
难道是我人品问题???
|
|
返回顶楼 | |
发表时间:2011-03-09
太多的话会挤到下面去
|
|
返回顶楼 | |
发表时间:2011-03-09
yulon 写道 太多的话会挤到下面去
太多肯定会的! |
|
返回顶楼 | |