javascript css 三级目录(简单的)

是在原先的二级目录改的,先给出演示

这里是css

代码如下:

/*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

代码如下:

/* 
这里是直接写死了,根据传入的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 = “”; 
  } 
}

演示查看

简易三级目录演示

管理中心

一级目录(老大)

  • 二级目录(老二)

    • 档案管理
    • 日志管理
    • 相册管理
    • 视频管理
    • 音乐管理
    • 房间管理
    • 物品管理
  • 二级目录(老二)
    • 档案管理
    • 日志管理
    • 相册管理
    • 视频管理
    • 音乐管理
    • 房间管理
    • 物品管理
  • 二级目录(老二)
    • 档案管理
    • 日志管理
    • 相册管理
    • 视频管理
    • 音乐管理
    • 房间管理
    • 物品管理

一级目录2(老大)

  • 二级目录(老二)

    • 档案管理
    • 日志管理
    • 相册管理
    • 视频管理
    • 音乐管理
    • 房间管理
    • 物品管理
  • 二级目录(老二)
    • 档案管理
    • 日志管理
    • 相册管理
    • 视频管理
    • 音乐管理
    • 房间管理
    • 物品管理
  • 二级目录(老二)
    • 档案管理
    • 日志管理
    • 相册管理
    • 视频管理
    • 音乐管理
    • 房间管理
    • 物品管理

一级目录2(老大)

  • 二级目录(老二)

    • 档案管理
    • 日志管理
    • 相册管理
    • 视频管理
    • 音乐管理
    • 房间管理
    • 物品管理
  • 二级目录(老二)
    • 档案管理
    • 日志管理
    • 相册管理
    • 视频管理
    • 音乐管理
    • 房间管理
    • 物品管理
  • 二级目录(老二)
    • 档案管理
    • 日志管理
    • 相册管理
    • 视频管理
    • 音乐管理
    • 房间管理
    • 物品管理

退出

//

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • javascript css 三级目录(简单的)

    是在原先的二级目录改的,先给出演示 这里是css 复制代码 代码如下: /*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 #c

  • javascript css实现三级目录(简单的)

    是在原先的二级目录改的,先给出演示 这里是css /*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

  • JavaScript+CSS无限极分类效果完整实现方法

    本文实例讲述了JavaScript+CSS无限极分类效果完整实现方法.分享给大家供大家参考,具体如下: CSS样式: a {text-decoration:none;} a,a:visited {color:#000;background:inherit;} body {margin:0;padding:20px;font:12px tahoma,宋体,sans-serif;} dt {font-size:22px;font-weight:bold;margin:0 0 0 15px;} dd

  • js改变style样式和css样式的简单实例

    js可实现用户对页面中的选择条件改变页面中的样式,页面样式可以通过style修饰,也可以通过css修饰,先来看一下js改变style样式,代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Change.html</title> <meta http-equiv="content-t

  • JavaScript实现三级联动菜单实例代码

    本文给大家分享的是使用javascript实现的一个简单的三级联动菜单,非常简单实用,有需要的小伙伴过来参考下吧. 用javascript制作的一个简单三级联动,非常简单实用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> 省: <select style="

  • js编写三级联动简单案例

    刚给学妹写了个简单的地区的三级联动简单案例,分享给正在学习的朋友参考下 <html> <head> <!--导入jquery--> <script type="text/javascript"src="jquery1.7.1.js"></script> </head> <script type="text/javascript"> $(function(){//页

  • 原生javascript实现的一个简单动画效果

    本文章向大家介绍一个javascript实现的动画.点击开始按钮div会往右移动,点击停止后,div停止移动,再点击则继续移动.请看下面代码. <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <head> <title>javascript实现的简单动画</title> <style type="text/css"&g

  • jQuery原理系列-css选择器的简单实现

    jQuery最强大的功能在于它可以通过css选择器查找元素,它的源码中有一半是sizzle css选择器引擎的代码,在html5规范出来之后,增加了document.querySelector和document.querySelectorAll直接查找元素,如果是做移动端开发的,使用jQuery的必要性大大降低. 用js代码实现css选择器,必然是用正则表达式来识别字符串了,当然浏览器提供的原生api 效率更高,以下代码只做原理性展示,并未优先性能, 例如 1)查找id显然是用document.

  • Javascript 调用 ActionScript 的简单方法

    1. 在Flex中,ActionScript调用Javascript是比较简单的,说白了就是,在html里,怎么调用Javascript,在ActionScript就怎么调用就可以了 2. 如果用js调用as,就稍微麻烦一点,其实也比较简单 MXML代码: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com//mxml&

  • JavaScript对JSON数组简单排序操作示例

    JavaScript对JSON数组简单排序操作示例

    本文实例讲述了JavaScript对JSON数组简单排序操作.分享给大家供大家参考,具体如下: 我们经常回使用到数据格式 var arr=[{num:1},{num:3},{num:2}] 如何根据数组里面的JSON数据的某个key进行排序 javascript有一个sort()方法,直接通过 arr.sort()进行排序,默认只对数组的值进行排序,然而以上的数组的值却是个JSON格式的. 我们在看看sort方法的定义: 定义和用法 sort() 方法用于对数组的元素进行排序. 语法 array

随机推荐