用户和后台管理选项卡菜单切换效果js代码免费下载

一款简单的用户和后台管理选项卡菜单切换效果js代码,点击左侧管理菜单项打开内容信息页面,可打开多个进行切换。

JS代码

<script type="text/javascript"> 
window.onload=function(){ 
function $(id){return document.getElementById(id)} 
var menu=$("topTags").getElementsByTagName("ul")[0];//顶部菜单容器 
var tags=menu.getElementsByTagName("li");//顶部菜单 
var ck=$("leftMenu").getElementsByTagName("ul")[0].getElementsByTagName("li");//左侧菜单 
var j; 
//点击左侧菜单增加新标签 
for(i=0;i<ck.length;i++){ 
ck[i].onclick=function(){ 
$("welcome").style.display="none"//欢迎内容隐藏 
clearMenu(); 
this.style.background='url(images/tabbg02.gif)' 
//循环取得当前索引 
for(j=0;j<8;j++){ 
if(this==ck[j]){ 
if($("p"+j)==null){ 
openNew(j,this.innerHTML);//设置标签显示文字 
 } 
clearStyle(); 
$("p"+j).style.background='url(images/tabbg1.gif)'; 
clearContent(); 
$("c"+j).style.display="block"; 
   } 
 } 
return false; 
  } 
 } 
//增加或删除标签 
function openNew(id,name){ 
var tagMenu=document.createElement("li"); 
tagMenu.id="p"+id; 
tagMenu.innerHTML=name+"  "+"<img src='images/off.gif' style='vertical-align:middle'/>"; 
//标签点击事件 
tagMenu.onclick=function(evt){ 
clearMenu(); 
ck[id].style.background='url(images/tabbg02.gif)' 
clearStyle(); 
tagMenu.style.background='url(images/tabbg1.gif)'; 
clearContent(); 
$("c"+id).style.display="block"; 
} 
//标签内关闭图片点击事件 
tagMenu.getElementsByTagName("img")[0].onclick=function(evt){ 
evt=(evt)?evt:((window.event)?window.event:null); 
if(evt.stopPropagation){evt.stopPropagation()} //取消opera和Safari冒泡行为; 
this.parentNode.parentNode.removeChild(tagMenu);//删除当前标签 
var color=tagMenu.style.backgroundColor; 
//设置如果关闭一个标签时,让最后一个标签得到焦点 
if(color=="#ffff00"||color=="yellow"){//区别浏览器对颜色解释 
if(tags.length-1>=0){ 
clearStyle(); 
tags[tags.length-1].style.background='url(images/tabbg1.gif)'; 
clearContent(); 
var cc=tags[tags.length-1].id.split("p"); 
$("c"+cc[1]).style.display="block"; 
clearMenu(); 
ck[cc[1]].style.background='url(images/tabbg1.gif)'; 
 } 
else{ 
clearContent(); 
clearMenu(); 
$("welcome").style.display="block" 
   } 
  } 
} 
menu.appendChild(tagMenu); 
} 
//清除菜单样式 
function clearMenu(){ 
for(i=0;i<ck.length;i++){ 
ck[i].style.background='url(images/tabbg01.gif)'; 
 } 
} 
//清除标签样式 
function clearStyle(){ 
for(i=0;i<tags.length;i++){ 
menu.getElementsByTagName("li")[i].style.background='url(images/tabbg2.gif)'; 
  } 
} 
//清除内容 
function clearContent(){ 
for(i=0;i<7;i++){ 
$("c"+i).style.display="none"; 
 } 
} 
} 
</script>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录