用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. 移动端使用HTML5表单增强体验

    我们知道,HTML5新增了许多表单类型,如: number,email,url,tel,datetime,month,datetime-local等等,像datetime,month这些非常方便,免得 ...

  2. openlayers 注册事件例子

    registerEvents:function() { this.events = new OpenLayers.Events(this, this.div, null, true); functio ...

  3. HANA Studio中修改默认查询结果只显示1000行

  4. vmware workstation11+centos7+lnmp一键安装包 环境搭建

    vmware workstation11 1.下载:http://pan.baidu.com/s/1gecipOJ 2.安装:直接下一步. centos7 1.下载:网易镜像 http://mirro ...

  5. 各种Camera，总有一款适合你（二）

    在实际的项目开发中,一般需要程序抽象出一些在几何意义上有明确意义的参数,这样方便策划或美术在自己的机器上进行调试. 下面是一个可变参的地下城摄像机的简单实现: // 第三人称摄像机,平移和旋转会同时进 ...

  6. 匹配img和a

    a:<\s*a\shref=*([^>]*)>([^<]|<(?!/a))*<\s*/a\s*> img:<img\b[^<>]*?\bsr ...

  7. python——第二天

    类和实例: 创建实例是通过类名+()实现 但是!可以自由地给每个实例变量绑定新的属性(特指以前在类定义中没有的属性) __init__方法用来给类定义必要的几个属性,第一个参数永远是self type ...

  8. statpot:使用mongo+bootstrap+highcharts做统计报表

    最近做了一个统计项目,这个统计项目大致的需求是统计接口的访问速度.客户端会调用一个接口来记录接口的访问情况,我的需求就需要分析这些数据,然后做出个统计报表. 需求实现 最初的时候想着每天把这些接口访问 ...

  9. Week3 博客阅读感想和代码复审

    一.关于博客阅读感想 阅读了十多篇老程序员(大多在计算机相关行业工作超过10年)关于自身经历的博客,很有感触.这里一方面总结一下看博客的收获,另一方面写点自己的感受. 首先,这些博客不少涉及到了两大类 ...

  10. vs2015 Android SDK

    It was not possible to complete an automatic installation. This might be due to a problem with your ...