用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. SSIS：控件清单

    Control Flow 控制流程 Containers 容器 For Loop Container Foreach Loop Container Sequence Container Core Ta ...

  2. Redis和Memcached的区别

    From: https://www.biaodianfu.com/redis-vs-memcached.html Redis的作者Salvatore Sanfilippo曾经对这两种基于内存的数据存储 ...

  3. 小兔伴伴家庭动物园AR智能早教产品上市

    2016年6月,经过乐卓大家庭所有人的共同努力,公司旗下首款新品——小兔伴伴之<家庭动物园>3D智能学习卡正式面世. 每个孩子都应该在合适的时间去体验丰富的声音.色彩和动作,<家庭动 ...

  4. 使用Doxygen生成net帮助文档

    一． 什么是Doxygen? Doxygen 是一个程序的文件产生工具,可将程序中的特定批注转换成为说明文件.通常我们在写程序时,或多或少都会写上批注,但是对于其它人而言,要直接探索程序里的批注,与打 ...

  5. VR是TAA的终结者吗？

    在刚刚发布的Unreal Engine 4.14中,其第一个重要的特性就是增加了在VR开发中对Forward Shading的支持.我们都知道在很多方面Deferred Shading都优于Forwa ...

  6. sql: 查找约束

    主键约束 SELECT   tab.name AS [表名],   idx.name AS [主键名称],   col.name AS [主键列名] FROM   sys.indexes idx    ...

  7. 网络爬虫urllib2 tornado

    百度不支持用tornado请求,可以用美团开放API 测试. import tornado.httpclient def fetch(url): http_header={'User-Agent':' ...

  8. java中String byte HexString的转换

    原文:http://blog.sina.com.cn/s/blog_62e9ec530101ebv6.html HexString——>byte public static byte[] hex ...

  9. Tips2:无需Gizmo函数 和 附加Render 实现空物体(GameObject)的可视化

    Unity在场景创建过程中,可能会用到很多空物体,如生成器(Spawn)什么的,一般空物体默认是看不到的,其实,空物体可以通过设置为可见的,这样在用到空物体时就能更加方便的编辑和控制了. 1.可以是这 ...

  10. LeetCode-95. Unique Binary Search Trees II

    Description: Given n, generate all structurally unique BST's (binary search trees) that store values ...