当前位置：编程学习 > asp >>

javascript css 易做图目录(简单的)

答案：是在原先的二级目录改的,先给出演示 
这里是css 
[复制此代码]CODE:

/*bg macji(http://www.macji.com)*/  
ul,li,p{margin:0; padding:0; list-style:none; font-size:12px}  
.m_menu_title{height:24px;line-height:24px;text-align:center;margin:0 1px}  
.m_menu_content{border-top:solid 1px #ccc;padding:8px 2px}    
/*一级*/  
.m_menu_content p{height:22px;line-height:22px}  
.m_menu_content p a{  
  color:#666633;  
  font-weight:bold;  
  text-decoration:none;  
  background:url(http://www.macji.com/blog/img/icon.gif) no-repeat 8px 4px;  
  padding:0 0 0 30px;  
  display:block  
}  
.m_menu_content p a:hover{color:#fe8005;font-weight:bold;text-decoration:none}  
.m_menu_content p a.on{background-position:8px -18px}    
/*二级*/  
.menu2{}  
.menu2 li{line-height:22px}  
.menu2 a{color:#000;  
  text-decoration:none;  
  display:block;  
  padding:0 0 0 40px;  
  background:url(http://www.macji.com/blog/img/icon.gif) no-repeat 18px 4px  
}  
.menu2 a.on{background-position:18px -18px}    
/*易做图*/  
.menu2 ul{}  
.menu2 ul a{  
  background-position:30px -39px;  
  padding:0 0 0 50px;  
  color:#666633;  
  text-decoration:underline  
}  
.menu2 ul a:hover{background-color:#f5f5f5; color:#f60} 

目录是循环的,我给写死了.下面给出js 
[复制此代码]CODE:

/*  
这里是直接写死了,根据传入的id编号,判断是否显示,不显示就显示  
id编号是有规律的,可用服务器端语言循环出目录  
*/  
function setMenuList(num){  
  var p = document.getElementById('p' + num);  
  var ul = document.getElementById('ul' + num);  
  if(ul.style.display == ‘none'){  
  ul.style.display = ”;  
  p.className = “on”;  
  }else{  
  ul.style.display = ‘none';  
  p.className = “”;  
  }  
}

演示查看
点击运行可以看到效果: