一个级联菜单demo

于 2019-07-05 06:25:59 发布
阅读量1.1k 收藏
点赞数
文章标签： 嵌入式 xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/softwaregirl/archive/2013/01/24/2874430.html
版权

最近在学些web前段的知识，看见博客园首页左侧的一个级联菜单，就想写一个demo.呵呵

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        *
        {
            padding: 0px;
            margin: 0px;
        }
        .dis_none
        {
            display: none;
        }
        .dis_block
        {
            display: block;
        }
        .subSheet
        {
            position: absolute;
            left: 100px;
            z-index: 10;
            width: 100px;           
        }
        ul
        {
            list-style: none;
        }
        li
        {
            border: 1px solid blue;
            width: 100px;
            background-color: Gray;
        }
        li a
        {
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ul>
            <li οnmοusemοve="mouse_over(1010)" οnmοuseοut="mouse_out(1010)"><a href="">.NET精华区</a>
                <div class="subSheet dis_none" id="1010">
                    <ul>
                        <li><a href="">新手入门</a></li>
                        <li><a href="">托管代码</a></li>
                        <li><a href="">非托管代码</a></li>
                    </ul>
                </div>
            </li>
            <li οnmοusemοve="mouse_over(1011)" οnmοuseοut="mouse_out(1011)"><a href="">嵌入式</a>
                <div class="subSheet dis_none" id="1011">
                    <ul>
                        <li><a href="">新手入门</a></li>
                        <li><a href="">嵌入式入门</a></li>
                        <li><a href="">嵌入式进阶</a></li>
                    </ul>
                </div>
            </li>
            <li οnmοusemοve="mouse_over(1012)" οnmοuseοut="mouse_out(1012)"><a href="">单片机</a>
                <div class="subSheet dis_none" id="1012">
                    <ul>
                        <li><a href="">新手入门</a></li>
                        <li><a href="">单片机入门</a></li>
                        <li><a href="">单片机进阶</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="">软件测试</a></li>
        </ul>
    </div>
    </form>
</body>
</html>
<script src="Scripts/jquery-1.6.3.js" type="text/javascript"></script>
<script type="text/javascript">
    function mouse_over(i) {
        $("#" + i).removeClass("dis_none");
    }
    function mouse_out(i) {
        $("#" + i).addClass("dis_none");
    }
</script>

转载于:https://www.cnblogs.com/softwaregirl/archive/2013/01/24/2874430.html

ducode
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
级联菜单级联菜单
02-25
级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单
关于级联菜单
热门推荐
软件开发
01-22 1万+
分享个极好的无刷新二级联动下拉列表 可能"极好的"又会带来很多的非议,但是我认为这确实很好,我看了大约20个无刷新的连动下拉列表,他们在firefox下面就一团糟.为了这个我差不多搞了两天,就是如果
下拉列表级联的小demo
扬帆起航的博客
07-30 309
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;script type="text/javascript"&gt; v
级联菜单
路在路上的博客
09-17 597
思路：先获取第一个下拉列表框的值，通过ajax发送请求到controller，成功后将值绑定到下拉列表框中。当第一个下拉列表框的值改变时，就通过ajax（将第一个选中的值作为参数）去获取第二个下拉列表框的值 部分代码： 例子：通过维修类别选择维修内容 //维修类别 function getrePairid() { $.ajax({ type:"post", //发送请求类型
级联下拉demo
05-26
这个“级联下拉demo”显然是一个示例项目，旨在演示如何实现这种功能。让我们深入探讨级联下拉的相关知识点。 级联下拉通常由两个或更多的下拉菜单组成，其中第二个（或更多）的选项取决于第一个的选择。这种交互...
一个级联菜单代码学习及removeClass与addClass的应用
01-19
最近在学些web前段的知识，看见博客园首页左侧的一个级联菜单，就想写一个demo.呵呵 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
js实现网页多级级联菜单代码
12-11
这是大家在网页上经常会见到的级联菜单特效，不过这一个代码是由JS来实现，将级联菜单中的内容保存在了JS数组中，为了页面美观，本次还美化了一下表格边框，整体看上去更和谐实用了，多级的下拉菜单对网页设计来说...
js实现城市级联菜单的2种方法
01-19
本文实例为大家分享了js实现城市级联菜单的具体代码，供大家参考，具体内容如下 方法一：用switch方法判断。 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>...
tigra_menu.zip_javascript_javascript 拖动_js_浮动_级联菜单
09-20
- **demo5、demo2、demo3、demo1**：这些通常是不同的示例或演示文件夹，每个可能展示了Tigra Menu的不同使用场景或功能，比如不同样式的级联菜单、可拖动菜单等。 通过这个压缩包，我们可以学习如何使用JavaScript...
级联菜单 级联菜单级联菜单级联菜单
12-10
级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单
级联菜单 动态级联菜单
07-27
级联菜单 动态级联菜单 可能动态取数据
级联菜单，多级菜单
04-10
级联菜单，多级菜单。自定义封装包可直接引用。
java级联菜单
06-13
让你很快学会级联，让你的知识更加丰富起来
三级级联菜单（JS+HTML)
01-21
自己在二级基础上修改的，亲测可用，欢迎下载！
级联菜单(Mysql实现)
青椒盖饭的博客
01-08 3962
功能描述 实际上级联菜单可能在很多情况下出现,例如:在设置地址的时候后,由用户先设置省份,而后再根据省份生出对应的城市信息. 实现无限极力按菜单选择 例如有用户自己设置要生成几级菜单 数据库设计 -- 删除原有的数据表 DROP TABLE IF EXISTS menu; -- 创建新的数据表 CREATE TABLE menu( mid INT AUTO_INCREMENT,...
级联菜单，省市级联菜单
yyjava的专栏
09-24 873
new document   function createProvince(){       //所有省份的数组   var provinces = ['--请选择省份--','北京市', '福建省', '湖北省'];   //获取文档中省份这个列表框元素对象      var province=document.myform.province;      for(var i = 0;
Excel 制作级联菜单
小语一天
08-17 5122
    目的：制作级联菜单 步骤： 1、定义各级菜单及选项如下： 菜单一级： 菜单1，菜单2 菜单二级：          菜单1：菜单1.1，菜单1.2          菜单2：菜单2.1，菜单2.2 菜单三级：          菜单1.1：菜单1.1.1，菜单1.1.2          菜单1.2：菜单1.2.1，菜单1.2.2          菜单2.1：菜单...
mysql 级联查询demo
最新发布
04-04
假设有两个表，一个是学生表（students），包含学生id、姓名、班级id等字段；另一个是班级表（classes），包含班级id和班级名称等字段。现在需要查询出每个学生所在的班级名称。 可以使用MySQL的级联查询来实现： ```sql SELECT students.id, students.name, classes.name AS class_name FROM students LEFT JOIN classes ON students.class_id = classes.id; ``` 上面的查询语句使用了左连接（LEFT JOIN）来关联学生表和班级表，以便查询出每个学生所在的班级名称。其中，students.id表示学生id，students.name表示学生姓名，classes.name表示班级名称，students.class_id表示学生所在的班级id，classes.id表示班级id。 这样就可以查询出每个学生所在的班级名称了。如果想查询某个具体学生所在的班级名称，可以在查询条件中增加学生id的限制条件。例如，查询id为1的学生所在的班级名称： ```sql SELECT students.id, students.name, classes.name AS class_name FROM students LEFT JOIN classes ON students.class_id = classes.id WHERE students.id = 1; ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值