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

charrys

浏览: 36172 次
性别:
来自: 广州

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

百度 JavaScript IE XHTML HTML

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

<!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 runat="server">
<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;overflow:hidden;}
#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>

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

分享到：

js文字上下滚动+左右滚动兼容FF/IE | 8个非常有用的在线工具（对于Web设计和开 ...

2011-02-14 15:59
浏览 1337
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

我的json获取数据实例，直接运行就可以看到了

ckeditor 编辑器+finder配置上传功能

kindeditor/ckeditor 编辑器加+图片自动上传成功（源码下载)

js实现的非跨域的iframe高度自适应(完美兼容IE,FF,Opera)

js遮罩层

js多Tab自动切换,带完善的鼠标事件

js多个tab切换简单不需要在body内添加事件

js文字上下滚动+左右滚动兼容FF/IE

清空数组的两种方式

js时间倒计时

JS可以控制样式的名称写法

js给C#控件赋值

iframe里面的页面调用父窗口,左右窗口js函数的方法

关于图片延迟加载技术-ImageLazyLoad

js判断父页存在

最近访客更多访客>>