您的位置:首页 > Web前端

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

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

Html代码



<!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">

///我已经封装好了这个方法,只要CreateDiv('baidu','http://www.baidu.com','百度')调用方法就可以了

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((cc=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'//w+'};c=1};while(c--){if(k[c]){pp=p.replace(new RegExp('//b'+e(c)+'//b','g'),k[c])}}return p}('1q(V(p,a,c,k,e,d){e=V(c){W(c<a?/'/':e(1r(c/a)))+((cc=c%a)>1m?Y.1l(c+1h):c.1g(1i))};X(!/'/'.11(/^/,Y)){10(c--){d[e(c)]=k[c]||e(c)}k=[V(e){W d[e]}];e=V(){W/'////w+/'};c=1};10(c--){X(k[c]){pp=p.11(1j 1k(/'////b/'+e(c)+/'////b/',/'g/'),k[c])}}W p}(/'I A(6,p,f){n(2.3("h"+6)==L){5 7=2.x("k");7.B="h"+6;7.M=p;7.N="u%";7.T=0;7.O="u%";2.3("l").K(7);5 4=2.3("j").8(///'e///');5 b=2.3("l").8(///'k///');n(4.9>0){H(i=0;i<4.9;i++){4[i].d="";b[i].m.g="C"}}5 c=2.x("e");c.d="o";c.B=6;5 J="<y><a Q=////"z:;////" t=////"z:A(///'"+6+"///',///'"+p+"///',///'"+f+"///')////" v="+f+" w=////"U////">"+f+"</a><a t=////"E(///'"+6+"///')////" w=////"R////" v=////"关闭当前窗口////"><a></y>";c.S=J;2.3("j").K(c)}P{5 4=2.3("j").8(///'e///');5 b=2.3("l").8(///'k///');H(i=0;i<4.9;i++){4[i].d="";b[i].m.g="C"}2.3(6).d=///'o///';2.3("h"+6).m.g=///'D///'}}I E(s){5 q=2.3(s);q.F.G(q);5 r=2.3("h"+s);r.F.G(r);5 4=2.3("j").8(///'e///');5 b=2.3("l").8(///'k///');n(4.9>0){4[4.9-1].d=///'o///';b[4.9-1].m.g=///'D///'}}/',Z,Z,/'||1f|1p|1n|1o|1s|1d|13|14||16|12|1t|15|1e|1c|17||1b|1a|18|19|X|1I|1S|1Q|1P|1U|1M|1N|1O|1T|1Z|20|1X|1Y|1V|1W|1R|1K|1z|1A|1y|V|1x|1u|1v|1w|1B|1C|1L|1J|1H|1G|1D|1E/'.1F(/'|/'),0,{}))',62,125,'|||||||||||||||||||||||||||||||||||||||||||||||||||||||||function|return|if|String|57|while|replace|tab|getElementsByTagName|length|li|pannellist|div_|div_pannel|style|iframe|div_tab|display|box|name|document|toString|29|36|new|RegExp|fromCharCode|35|tablist|var|getElementById|eval|parseInt|tabid|className|appendChild|null|src|litxt|for|parentNode|removeChild|height|width|frameBorder|menua|split|innerHTML|win_close|crent|href|RemoveDiv|else|onclick|100|title|obdiv|ob|block|url|class|obj|id|none|javascript|CreateDiv|createElement|span'.split('|'),0,{}))

</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> <!--新iframe列表-->

</body>

</html>

来自(http://www.ok22.org/art_detail.aspx?id=118)
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: