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

最新推荐文章于 2023-03-14 15:58:10 发布

86y

最新推荐文章于 2023-03-14 15:58:10 发布

阅读量867

点赞数

分类专栏： JS 文章标签： function url c div iframe javascript

本文链接：https://blog.csdn.net/charrys/article/details/6184279

版权

JS 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

看了很多别人写的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>
</body>
</html>

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

86y

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端设计js+Tab切换可关闭+添加并自动判断是否已打开自动切换当前状态

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

扫一扫