用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. 正则表达式工具RegexBuddy使用教程（原创自Zjmainstay）

    从<我眼里的正则表达式(入门)>这个文章,到<深入正则表达式应用>,再到后来专门创建的正则QQ群"专精正则表达式",到现在已经过去2年时间了.在文章和群里一 ...

  2. {转}Unity3d+Jenkins 自动编译iOS、Android版本（U3D远程自动打包工具）

    http://www.cnblogs.com/yinghuochong/archive/2013/09/01/3294940.html

  3. CSS3动画进度条

    CSS3动画进度条   CSS CODE: @-webkit-keyframes move{ 0%{ background-position: 0 0; } 100%{ background-posi ...

  4. right-click an action, missing "Go to slot"

    According to the tutorial,to connect the actions to slots, right-click an action and select Go to sl ...

  5. Javascript倒计时组件new TimeSpan(hours, minutes, minutes)

    function TimeSpan(h, m, s) { this.h = Number(h); this.m = Number(m); this.s = Number(s); } TimeSpan. ...

  6. 编写高质量JS代码的68个有效方法（九）

    No.41.将原型视为实现细节 Tips: 对象是接口,原型是实现 避免检查你无法控制的对象的原型结构 避免检查实现在你无法控制的对象内部的属性 我们可以获取对象的属性值和调用其方法,这些操作都不是特 ...

  7. 【转载】SHELL字符串处理技巧（${}、##、%%）

    转载自:http://www.cnblogs.com/pmars/archive/2013/02/17/2914444.html 在SHELL编程中,经常要处理一些字符串变量.比如,计算长度啊.截取子 ...

  8. 前端技术Bootstrap的hello world

    ----对于用户来说,界面就是程序本身.那么一个漂亮的web一定是你继续使用这个应用的前题. 这一节我们来一起写个Bootstrap的hello wrold. Bootstrap Bootstrap  ...

  9. 推荐几款很棒的 JavaScript 表单美化和验证插件

    表单元素让人爱恨交加.作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅.登陆注册到复杂的需要多页填写的信息提交功能,表单都让开发者花费了大量的时间和精力去处理,以期实现好用又漂亮的表单功能 ...

  10. Java工程师面试题，整理自网络与博主各种笔试面试，持续更新

    1.面向对象的特征有哪些方面? 封装:通常认为封装是把数据和操作数据的方法绑定起来,对数据的访问只能通过已定义的接口. 多态性:多态性是指允许不同子类型的对象对同一消息作出不同的响应.简单的说就是用同 ...