div+css树形菜单

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

<!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树形菜单的更多相关文章

HTML5 div+css导航菜单
HTML5 div+css导航菜单视频音乐小说故事作品阅读联系
[div+css]竖排菜单
} #box{ width:120px; font-size: 12px; font- ...
十天学会<div+css>横向导航菜单和纵向导航菜单
纵向导航菜单及二级弹出菜单纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...
DIV+CSS制作二级横向弹出菜单，略简单
没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...
CSS之简单树形菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
下拉的DIV+CSS+JS二级树型菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
DIV+CSS布局重新学习之css控制ul li实现2级菜单
竖状菜单: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
经典的 div + css 鼠标 hover 下拉菜单
经典的 div + css 鼠标 hover 下拉菜单效果图: 源码: <html> <head> <meta charset="utf-8"> ...
jQuery 树形菜单
树形菜单在 jQuery easyu中其左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 tree 需要单击分叉节点前的小三角,才 ...

随机推荐

海量数据处理利器greenplum——初识
简介及适用场景如果想在数据仓库中快速查询结果,可以使用greenplum. Greenplum数据库也简称GPDB.它拥有丰富的特性: 第一,完善的标准支持:GPDB完全支持ANSI SQL 200 ...
USB系列之二：读取USB设备的描述符
在前面的文章中,我们已经给出了USB协议的链接地址,从这篇文章起,我们会涉及到许多USB 1.1的内容,我们的指导思想是先从熟悉USB 1.1协议入手,先使用现成的HCD和USBD,直接面对客户端驱动 ...
WPF制作的一个小功能,智能提示(IntelliSense)
原文http://www.cnblogs.com/scheshan/archive/2012/06/30/2570867.html 最近WPF项目中遇到一个需求,需要给一个RichTextBox添加智 ...
scheme Continuation
Continuation Pass Style在函数式编程(FP)中有一种被称为Continuation Passing Style(CPS)的风格.在这种风格的背后所蕴含的思想就是将处理中可变的一部 ...
css案例学习之div a实现立体菜单
效果代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
nginx监听端口和反向代理端口的权限问题
Linux的SELinux安全性控制除作用于文件系统外还作用于端口,这使得那些作为服务启动的进程只能在规定的几个端口上监听.为叙述方便我们称之为受控端口. nginx监听端口要查看当前有哪些受控端口 ...
man/ls/clock/date/echo笔记
login: 用户名:用户ID 认证机制:Authentication授权:Authorization审计:Audition (日志) prompt,命令提示符:命令:magic numb ...
MyCat 主键ID自增长配置
在实现分库分表的情况下,数据库自增主键已无法保证自增主键的全局唯一.为此,MyCat 提供了全局sequence,并且提供了包含本地配置和数据库配置等多种实现方式,实现方式主要有三种:本地文件方式.数 ...
本人对于JavaScript的一些总结
类型.值和变量 1.原始类型数字.字符串和布尔 null空 undefined未定义 2.对象类型 3.类 Array Function Date RegExp Error 4.js ...
Django 从零開始
1.下载安装django 方法1: pip install Django==1.6.5 測试是否成功安装 : ~$ python import django ~$ (1, 6, 5, 'final', ...

div+css树形菜单

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

随机推荐

热门专题