用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. Windows batch，echo到文件不成功，只打印出ECHO is on.

    jenkins 执行Windows batch command的时候,如果想要读写文件,echo到文件不成功. bat 代码如下: set ctime=%date%_%time% echo %ctim ...

  2. Log4j配置说明及样例

    一般的应用都会记录日志,Java圈里面用得最多就属log4j了,比较规范一点就是使用log4j.xml进行配置Log输出.这里就比较有疑问,多数情况是使用log4j.properties文件呐,前面也 ...

  3. [转载]斐讯K2 A2版免TTL刷BREED不死Bootloader

    1:路由器能正常上网,登陆进路由器 (默认密码admin) 2:用浏览器打开这个网址,如果默认ip不是192.168.2.1修改一下.打开后等待即可自动刷入breed. http://192.168. ...

  4. mingW与cygwin

    转自:http://hi.baidu.com/ooxxer/item/d25dccc072846a50ac00ef7e# 首先MingW和cygwin都可以用来跨平台开发.  MinGW是Minima ...

  5. MyBatis知多少（10）应用程序数据库

    应用程序数据库往往是最小.最简单.也最易于使用的数据库.这种数据库往往是我们这些开发人员通常不介意使用甚至非常乐意使用的.应用程序数据库通常与我们的应用程序处于同一个项目中,两者一齐设计和实现.正是因 ...

  6. 爆料喽！！！开源日志库Logger的使用秘籍

    日志对于开发来说是非常重要的,不管是调试数据查看.bug问题追踪定位.数据信息收集统计,日常工作运行维护等等,都大量的使用到.今天介绍著名开源日志库Logger的使用,库的地址:https://git ...

  7. [Git] Git 常用技巧

    版本对比 1. 对比两个 COMMIT git diff <commit> <commit> 2. 对比 COMMIT 和父 COMMIT git diff <commi ...

  8. (转)offsetof与container_of宏[总结]

    1.前言 今天在看代码时,遇到offsetof和container_of两个宏,觉得很有意思,功能很强大.offsetof是用来判断结构体中成员的偏移位置,container_of宏用来根据成员的地址 ...

  9. Lua基础

    局部定义与代码块: 使用local声明一个局部变量或局部函数,局部对象只在被声明的那个代码块中有效. 代码块:一个控制结构.一个函数体.一个chunk(一个文件或文本串)(Lua把chunk当做函数处 ...

  10. 随着ScrollView的滑动，渐渐的执行动画View

    今天是实现了一个小功能的东西.看看效果图: 实现方式: 1.自定义ScrollView   复写onScrollChange方法,来计算滑动的位置. 2.自定义接口,通过接口来在ScrollView中 ...