网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索 电影文章

文章热门排行随机文章推荐文章

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

关注我吧
 2011/7/18 8:58:46 阅读次数:16616

看了很多别人写的tab切换效果感觉都只是div+js去切换已存在的!有的是添加或删除tab的但是太麻烦了还要改js文件你说是不是很不方便呢,我这个直接修改页面里面的参数就可以了!所以我自己就写了这个功能!谢谢,如果转载请注明出处(http://www.86y.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>
    <title>前端设计js+Tab切换可关闭+添加并自动判断是否已打开自动切换当前状态</title>
	<style>
	body,html{height:100%;}
	#div_pannel{height:800px;}
	*{margin:0;padding:0;}
	
	#menu{padding:10px 0 0 10px;}
	#menu a{color:#333;}
	#menu a.crent{color:#ff0000;}
	#div_tab{background:#fff url(http://www.86y.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.86y.org/images/t_tab_uselectbg.gif);margin-top:3px;height:23px;}
	#div_tab li span{background:url(http://www.86y.org/images/t_tab_uselectbg.gif);height:23px;line-height:23px;}
	
	#div_tab li.crent{background:url(http://www.86y.org/images/t_tab_selectbg.gif);margin-top:2px;height:24px;}
	#div_tab li.crent span{background:url(http://www.86y.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.86y.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)
		 {
		 	setacrent(tabid);
			///如果当前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 setacrent(obj){
			var alists=document.getElementById("menu").getElementsByTagName("a");
			for(var i=0;i<alists.length;i++)
			{
				if(alists[i].rel==obj)
					alists[i].className="crent";
				else
					alists[i].className="";
			}
			
		}
		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>
<div id="menu"><a href="javascript:;" rel="bing" onclick="CreateDiv('bing','http://www.bing.com','必应')">必应</a>  <a href="javascript:;" rel="cnblogs" onclick="CreateDiv('cnblogs','http://www.cnblogs.com','博客园')">博客园</a>  <a href="javascript:;" rel="ok22" onclick="CreateDiv('ok22','http://www.86y.org','幸凡在线学习网')">幸凡在线学习网</a></div>
	<ul class="clearfix" id="div_tab"></ul>
    <div id="div_pannel"></div>
</body>
</html>


大家有什么问题或技术上的想法可以在此与大家分享,也可以点击链接加入群:【幸凡学习网技术交流群】
如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=118【前端设计js+Tab切换可关闭+添加并自动判断是否已打开自动切换当前状态】幸凡学习网

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

0
无觅相关文章插件,快速提升流量
阅读全文内容关闭