自己做过的项目从来没有这种东西，但见过别人的项目都有，未免落伍，学来看看，也不知道自己找到的这个是不是正路子，先贴代码再分析。

<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css" media="all">

a,a:visited {color:#333;text-decoration:none;}

a:hover {color:#f60;}

body,td {font:13px "Geneva","宋体", "Arial", "Helvetica",sans-serif;}

ul,li {margin:0;padding:0;list-style:none;}

h1,h2,h3,h4,h5,h6 {margin:0;padding:0;}

h1 {padding:5px;color:#900;font:16px bold "Geneva","宋体", "Arial", "Helvetica",sans-serif;}

h1 small {font-size:11px;font-weight:normal;color:#660;}

.tree_out {width:200px;}

.tree_1 .tree_tit a,

.tree_1 .tree_tit a:visited,

.tree_2 .tree_tit a,

.tree_2 .tree_tit a:visited {margin-left:10px;padding-left:40px;color:#003;font-size:12px;display:block;}

.tree_2 .tree_tit h3.Lst a {line-height:250%;background: #FF0000;}

.tree_2 .tree_txt {display:none;}

.tree_1 .tree_txt ul li {padding-left:65px;line-height:150%;}

.tree_1 .tree_txt .num {color:#e00;}

</style>

<script type="text/javascript">

    <!--

    function ExChgClsName(Obj,NameA,NameB){

        var Obj=document.getElementById(Obj)?document.getElementById(Obj):Obj;

        Obj.className=Obj.className==NameA?NameB:NameA;

    }

    function showmenu_tree(iNo){

        ExChgClsName("tree_id__"+iNo,"tree_1","tree_2");

    }

    -->

</script>

</head>

<body>

<div class="tree_out">

    <div class="tree_1" id="tree_id__0">

        <div class="tree_tit"><h3><a href="javascript:showmenu_tree(0);">一号主菜单</a></h3></div>

        <div class="tree_txt">

            <ul>

                <li><a>一号子菜单</a></li>

                <li><a>二号子菜单</a></li>

                <li><a>三号子菜单</a></li>

                <li><a>四号子菜单</a></li>

                <li class="Lst"><a>五号子菜单</a></li>

            </ul>

        </div>

    </div>

    <div class="tree_2" id="tree_id__1">

        <div class="tree_tit"><h3><a href="javascript:showmenu_tree(1);">二号主菜单</a></h3></div>

        <div class="tree_txt">

            <ul>

                <li><a>一号子菜单</a></li>

                <li><a>二号子菜单</a></li>

                <li><a>三号子菜单</a></li>

                <li><a>四号子菜单</a></li>

                <li class="Lst"><a>五号子菜单</a></li>

            </ul>

        </div>

    </div>

    <div class="tree_2" id="tree_id__2">

        <div class="tree_tit"><h3><a href="javascript:showmenu_tree(2);">三号主菜单</a></h3></div>

        <div class="tree_txt">

            <ul>

                <li><a>一号子菜单</a></li>

                <li><a>二号子菜单</a></li>

                <li><a>三号子菜单</a></li>

                <li><a>四号子菜单</a></li>

                <li class="Lst"><a>五号子菜单</a></li>

            </ul>

        </div>

    </div>

    <div class="tree_2" id="tree_id__3">

    <div class="tree_tit"><h3><a href="javascript:showmenu_tree(3);">四号主菜单</a></h3></div>

    <div class="tree_txt">

         <ul>

            <li><a>一号子菜单</a></li>

            <li><a>二号子菜单</a></li>

            <li><a>三号子菜单</a></li>

            <li><a>四号子菜单</a></li>

            <li class="Lst"><a>五号子菜单</a></li>

         </ul>

    </div>

    </div>

</div>

</body>

</html>

虽说是css + div,但起作用的肯定是javaScript吧，

然后我震惊的发现起作用的就一行代码

Obj.className=Obj.className==NameA?NameB:NameA;

选哪一个就把哪一个div的css换掉。

div+css树形菜单的更多相关文章

  1. HTML5 div+css导航菜单

    HTML5 div+css导航菜单 视频 音乐 小说   故事 作品 阅读 联系

  2. [div+css]竖排菜单

             }          #box{              width:120px;              font-size: 12px;              font- ...

  3. 十天学会<div+css>横向导航菜单和纵向导航菜单

    纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...

  4. DIV+CSS制作二级横向弹出菜单，略简单

    没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...

  5. CSS之简单树形菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 下拉的DIV+CSS+JS二级树型菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. DIV+CSS布局重新学习之css控制ul li实现2级菜单

    竖状菜单: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  8. 经典的 div + css 鼠标 hover 下拉菜单

    经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...

  9. jQuery 树形菜单

    树形菜单 在 jQuery easyu中其左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 tree 需要单击分叉节点前的小三角,才 ...

随机推荐

  1. 高可用集群(HA)之Keeplived原理+配置过程

    原理--> 通过vrrp协议,定义虚拟路由,在多个服务节点上进行转移. 通过节点优先级,将初始虚拟路由到优先级高的节点上,checker工作进程检测到主节点出问题时,则降低此节点优先级,从而实现 ...

  2. display:table-cell的惊天作用，直接惊呆你！

    一 display:table-cell介绍 ... 二 用法 (1)高度不固定元素,垂直居中 ... (2)高度不固定列表元素,登高排列 ... (3)宽度不固定元素,平均分配 ...

  3. underscoreJS的Collections 的API

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. C# Struct结构体

    C#中结构类型和类类型在语法上非常相似,他们都是一种数据结构,都可以包括数据成员和方法成员. 结构和类的区别: 1.结构是值类型,它在栈中分配空间:而类是引用类型,它在堆中分配空间,栈中保存的只是引用 ...

  5. X windows的底层实现机制

    Qt在Linux上运行崩溃了,很可能的原因是对于X11机制的不了解.很可能是UI代码里面对窗口的操作不规范而导致Qt内部的BUG暴露出来.具体UI实现代码我也没有看.是别人维护的.打算今天去看下代码, ...

  6. [poj 1039]Pipes[线段相交求交点]

    题意: 无反射不透明管子, 问从入口射入的所有光线最远能到达的横坐标. 贯穿也可. 思路: 枚举每一组经过 up [ i ] 和 down [ j ] 的直线, 计算最远点. 因为无法按照光线生成的方 ...

  7. bzoj1650 [Usaco2006 Dec]River Hopscotch 跳石子

    Description Every year the cows hold an event featuring a peculiar version of hopscotch that involve ...

  8. Unity 预处理命令

    我们经常在代码里面写Debug.Log()调试代码,游戏后门代码.这些代码在发布时无意义的,我们就需要慢慢的删除掉它们(很痛苦),有什么办法让它们在编译的时候并不加入编译代码中呢?  预处理命令..比 ...

  9. Oracle学习笔记(2)——过程和函数

    过程和函数统称为PL/SQL子程序,通过输入.输出参数或输入/输出参数与其调用者交换信息.他们是被命名的PL/SQL块,被编译后存储在数据库中,以备执行.因此,可以在数据库中直接按名称使用它们. 1. ...

  10. android createbitmap函数内存溢出，求解怎样进行处理out of memory溢出问题

    android createbitmap函数内存溢出,求解怎样进行处理out of memory溢出问题 android createbitmap函数内存溢出,求解怎样进行处理out of memor ...