web ui小框架 tab页

来源：互联网发布：淘宝店铺产品全部下架编辑：程序博客网时间：2024/05/20 11:49

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>标签显示</title>

<style type="text/css">
body{
background:#FFF;
}
#navtab {
width:99%;
float:left;
background-image: url(images/nav_bg.jpg);
}
#navtab ul {
margin:0;
list-style:none;
padding: 0;
}
#navtab li {
float:left;
margin:0;
padding:2px 15px 0 10px;
line-height:24px;
font-weight:bold;
}
.bg_image{
width:90px;
height:30px;
background: url(images/manage_r2_c14.jpg) no-repeat;
cursor:pointer;

}
.bg_image_onclick{
width:90px;
height:30px;
background: url(images/manage_r2_c13.jpg) no-repeat;
color:#0099CC;

}
.tabtitle{
float:left;
display:inline;
width:70px;
line-height:30px;
overflow:hidden;
}
.closeTag{
float:right;
display:inline;
width:10px;
height:10px;
}
.tabcontent
{
display:none;
}
.tabcontent_show
{
display:block;
}
</style>

</head>
<script type="text/javascript">

var currentTabId="man_nav_1";//当前展示的tab页id

//获取对象属性兼容方法
function getObject(objectId) {
if(document.getElementById && document.getElementById(objectId)) {
// W3C DOM
return document.getElementById(objectId);
} else if (document.all && document.all(objectId)) {
// MSIE 4 DOM
return document.all(objectId);
} else if (document.layers && document.layers[objectId]) {
// NN 4 DOM.. note: this won't find nested layers
return document.layers[objectId];
} else {
return false;
}
}

function addTab(url,Id,title){

//alert("addTab");
var newTab='<li id="'+Id+'" onclick="changeTab(id,'+''+title+''+')" class="bg_image"><span class="tabtitle">Tab1111</span>';
newTab+='<span onclick="closeTab(this)" class="closeTag" ><img src="images/up_list.gif" /></span> </li>';

var newTabContent='<div id="'+Id+'_div" class="tabcontent"><iframe id="'+Id+'_iframe" src="" class="iframecontent"> </iframe></div>';
getObject("navcontent").innerHTML+=newTab;
getObject("tabContents").innerHTML+=newTabContent;
changeTab(Id,title);
}
function changeTab(Id,title){

if(currentTabId != ""){
getObject(currentTabId).className="bg_image";
getObject(currentTabId+"_div").className="tabcontent";
}
if(getObject(Id).className == "bg_image"){
getObject(Id).className="bg_image_onclick";
currentTabId = Id;
getObject(currentTabId+"_div").className="tabcontent_show";
}
currentTabId=Id;
}

function closeTab(e){
var src=window.event.srcElement||e.target;
var liDom=src.parentNode.parentNode;
var ulDom=liDom.parentNode;
//ulDom.removeChild(liDom);
//previousSibling Node 指向前一个兄弟节点;如果这个节点就是第一个兄弟节点，那么该值为null
//nextSibling Node 指向后一个兄弟节点;如果这个节点就是最后一个兄弟节点，那么该值为null
var tabId=liDom.attributes("id").nodeValue;
try{
if(liDom.previousSibling||liDom.nextSibling)
{
if(currentTabId==tabId)//关闭当前展示的tab页
{

//alert("dangqian");
delTabContent(tabId);
if(liDom.nextSibling)
{
var nextNode=liDom.nextSibling;
var nextNodeId=nextNode.attributes("id").nodeValue
changeTab(nextNodeId,null);
}else{
var previousNode=liDom.previousSibling;
previousNodeid=previousNode.attributes("id").nodeValue
//alert(previousNodeid);
changeTab(previousNodeid,null);
}
}else{
//alert(2);
delTabContent(tabId);

}
ulDom.removeChild(liDom)
}else {
alert("没有其他节点");
}
}catch(e){
//abort
}
}
function delTabContent(tabId){
try{
var tabContent=getObject(tabId+"_div");
tabContent.parentNode.removeChild(tabContent);

}catch(e)
{

}
}
</script>
<body>
<div id="navtab">
<ul id="navcontent">
<li id="man_nav_1" onclick="changeTab(id,'管理首页')" class="bg_image">
<span class="tabtitle">Tab1111</span>
<span onclick="closeTab(this)" class="closeTag" >
<img src="images/up_list.gif" />
</span>

</li>
<li id="man_nav_2" onclick="changeTab(id,'管理首页')" class="bg_image">
<span class="tabtitle">Tab2222</span>
<span onclick="closeTab(this)" class="closeTag" >
<img src="images/up_list.gif" />
</span>

</li>
<li id="man_nav_3" onclick="changeTab(id,'管理首页')" class="bg_image">
<span class="tabtitle">Tab33333</span>
<span onclick="closeTab(this)" class="closeTag" >
<img src="images/up_list.gif" />
</span>

</li>
<li id="man_nav_4" onclick="changeTab(id,'管理首页')" class="bg_image">
<span class="tabtitle">Tab4444444444</span>
<span onclick="closeTab(this)" class="closeTag" >
<img src="images/up_list.gif" />
</span>

</li>

</ul>
</div>

<div id="tabContents">
<div id="man_nav_1_div" class="tabcontent">
11111
<iframe id="man_nav_1_iframe" src="" class="iframecontent"> </iframe>
</div>
<div id="man_nav_2_div" class="tabcontent">
22222
<iframe id="man_nav_2_iframe" src="" class="iframecontent"> </iframe>
</div>
</div>

<div>
<input type="button" value="添加tab" onclick="addTab('tabid','url','title')"/>
</div>
</body>
</html>