用js枚举实现简易菜单效果，左侧显示菜单，右侧显示用户选择的菜单，一图胜千言，还是直接来张效果图吧：

以下是代码：

<DOCTYPE html>

<html>

<head>

    <title></title>

    <style>

    body{

        color:#333;

        font-size:12px;

    }

    div{

        width: 300px;

        margin: 0 auto;

    }

    ul{

        width: 80px;

        height:200px;

        background: #ccc;

        list-style:none;

        float: left;

        margin: 10px;

    }

     li{

        width: 60px;

        height:20px;

        margin:4px;

        background: orange;

        line-height: 20px;

        text-align: center;

        cursor:pointer;

    }

    li:hover{

        background:#EE9A00

    }

    </style>

    <script>

    window.onload=function(){

        var oli=document.getElementById('fa').getElementsByTagName('li');

        var newul=document.getElementById('so');

        var newli=newul.getElementsByTagName('li');

        for(var i=0;i<oli.length;i++)

        {

            oli[i].onclick=function(){

                if(selectfn(this.innerHTML)) //倘若该菜没有被选中，那么添加到用户菜单

                    {

                        var createli=document.createElement('li');

                        createli.innerHTML=this.innerHTML;//改代码放在appendchild之前能提高性能

                        newul.appendChild(createli);   //向用户菜单中加入该节点

                    }

            };

        }

        function selectfn(text){     //核心函数

            var result=true;

            for(var i=0;i<newli.length;i++)   //遍历用户菜单，与当前菜单做对比，判断是否已经选中

            {

                if(newli[i].innerHTML==text)  //若对比成功说明已经选中该菜

                {

                    alert('您已选取：'+newli[i].innerHTML);

                    return false;

                }

            }

            return true;

        }

    }

    </script>

</head>

<body>

        <div>

            <ul id="fa">

                <h3>菜单：</h3>

                <li>鱼香肉丝</li>

                <li>火爆肥牛</li>

                <li>水煮肉片</li>

                <li>麻辣乌鱼</li>

                <li>五香鸭珍</li>

                <li>红油牛肚</li>

            </ul>

            <ul id="so">

               <h3>您的选择：</h3>

            </ul>

        </div>

</body>

</html>

其核心原理就是：点击<li>标签时，用该标签的innerHTML与用户菜单<li>标签的innerHTML循环对比匹配，若没有匹配则说明该标签没有被点击过，那就在用户菜单里添加，若对比成功，说明用户菜单已经有该标签，也就是说已经选择了该菜，那就不再往用户里添加，弹出“已经选择该菜”提示框。

用js枚举实现简易菜单效果的更多相关文章

  1. 实用js+css多级树形展开效果导航菜单

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

  2. js+css实现带缓冲效果右键弹出菜单

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

  3. Js实现京东无延迟菜单效果(demo)

    一个端午节,外面人山人海,又那么热,我认为宅在家里看看慕课网,充实自己来的实际... 这是一个js实现京东无延迟菜单效果,感觉很好,分享给大家... 1.开发基本的菜单结构 2.开发普通的二级菜单效果 ...

  4. js下拉框二级关联菜单效果代码具体实现

    这篇文章介绍了js下拉框二级关联菜单效果代码具体实现,有需要的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  5. 原生JS通过勾股定理计算苹果菜单效果

    JS原生苹果菜单效果 知识点: 勾股定理 a²+b²=c² Event 是一个事件对象,当一个事件发生后,和当前事件发生相关的详细信息会被临时存储到一个指定的地方,也就是event对象,以方便我们在需 ...

  6. Js实现京东无延迟菜单效果(demo) 慕课网

    先来理清思路:1.开发基本的菜单结构 2.开发普通的二级菜单效果 3.假如延迟解决移动问题 切换子菜单时候,用setTimeout设置延迟 debounce去抖技 在事件被频繁触发是,只执行一次处理 ...

  7. css三级菜单效果

    一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  8. Angular.js+Bootstrap实现手风琴菜单

    说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...

  9. ligerui_实际项目_001：利用ligerLayout、ligerAccordion实现可折叠的菜单效果

    效果:利用ligerLayout.ligerAccordion实现可折叠的菜单效果 可能用到的js.css.images等,可到官网下载: 第01步:引入相应的文件 <head><l ...

随机推荐

  1. CSS HACK 及常见问题

    一.CSS常用hack 1.方式一:条件注释法 这种方式是IE浏览器专有的Hack方式,微软官方推荐使用的hack方式.举例如下 只在IE下生效 <!--[if IE]> 这段文字只在IE ...

  2. ubuntu安装php mcrypt扩展

    1.安装扩展 sudo apt-get install php5-mcrypt 2.添加扩展配置文件 apt-get没有在/etc/php5/cli/conf.d/和/etc/php5/fpm/con ...

  3. Probabilistic Graphical Models

    http://innopac.lib.tsinghua.edu.cn/search~S1*chx?/YProbabilistic+Graphical+Models&searchscope=1& ...

  4. IIS6.0下 Asp.Net 拦截jpg请求

    之前用mvc写了一个接口,访问格式 http://ip:port/{id}-{type}.jpg来获取一个图片,在IIS7.0+运行毫无障碍,但是在IIS6.0下,直接提示文件不存在或者已删除. 经过 ...

  5. 代码演示用 .NET 4.5 （C# 5.0）自带的压缩类 ZipArchive 创建一个压缩文件

    代码如下: using System; using System.Collections.Generic; using System.IO; using System.IO.Compression; ...

  6. overflow:hidden的另一层含义

    overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是 很了解.一提到清除浮动,我们就会想到另外一个CSS样式 ...

  7. debian之samba服务器搭建

    安装过程非常简单: apt-get install samba sudo vim /etc/sama/smb.conf [pengdl] comment = pengdl's samba path = ...

  8. GitHub上那些值得一试的JAVA开源库

    作为一名程序员,你几乎每天都会使用到GitHub上的那些著名Java第三方库,比如Apache Commons,Spring,Hibernate等等.除了这些,你可能还会fork或Star一些其他的开 ...

  9. Hadoop入门进阶课程12--Flume介绍、安装与应用案例

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博主为石山园,博客地址为 http://www.cnblogs.com/shishanyuan  ...

  10. SpringMVC架构浅析

    SpringMVC概述 Spring的web框架围绕DispatcherServlet设计. DispatcherServlet的作用是将请求分发到不同的处理器. Spring的web框架包括可配置的 ...