用js枚举实现简易菜单效果
用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枚举实现简易菜单效果的更多相关文章
- 实用js+css多级树形展开效果导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js+css实现带缓冲效果右键弹出菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Js实现京东无延迟菜单效果(demo)
一个端午节,外面人山人海,又那么热,我认为宅在家里看看慕课网,充实自己来的实际... 这是一个js实现京东无延迟菜单效果,感觉很好,分享给大家... 1.开发基本的菜单结构 2.开发普通的二级菜单效果 ...
- js下拉框二级关联菜单效果代码具体实现
这篇文章介绍了js下拉框二级关联菜单效果代码具体实现,有需要的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
- 原生JS通过勾股定理计算苹果菜单效果
JS原生苹果菜单效果 知识点: 勾股定理 a²+b²=c² Event 是一个事件对象,当一个事件发生后,和当前事件发生相关的详细信息会被临时存储到一个指定的地方,也就是event对象,以方便我们在需 ...
- Js实现京东无延迟菜单效果(demo) 慕课网
先来理清思路:1.开发基本的菜单结构 2.开发普通的二级菜单效果 3.假如延迟解决移动问题 切换子菜单时候,用setTimeout设置延迟 debounce去抖技 在事件被频繁触发是,只执行一次处理 ...
- css三级菜单效果
一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...
- Angular.js+Bootstrap实现手风琴菜单
说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...
- ligerui_实际项目_001：利用ligerLayout、ligerAccordion实现可折叠的菜单效果
效果:利用ligerLayout.ligerAccordion实现可折叠的菜单效果 可能用到的js.css.images等,可到官网下载: 第01步:引入相应的文件 <head><l ...
随机推荐
- sql server 2008安装过程中服务器配置出错
请选择:对所有 SQL Server 服务使用相同的账号: 但这里不能给他设置自己定义的账号和密码 ( 例如下面设置它的账号为 sa ,密码为 654321) 就会发生错误:
- Unity3d导出Android的apk文件时相关问题的解决办法
今天上午着手将一个unity3d开发的小游戏build到android手机上运行,结果遇到了不少问题. 首先遇到的第一个问题是在build到一半的时候,弹出如下报错: Error building P ...
- Ubuntu下PHP的扩展
Ubuntu版本:14.04 1. 下载php-5.5.10.tar.bz2,并解压. 2. 终端进入解压后的目录php-5.5.10,运行configure.(输入命令./configure) 3 ...
- JS获取跨域的cookie实例
如果说JS能实现跨域cookie,你可能觉得不太可能实现,不过事实上,这个还是可以搞定的,不过需要一定的条件才行的哦!具体方案如下: 一共需要3个文件,第一个文件为需要获取cookie的页面,在这个页 ...
- C++的ORM工具比较
用过Java的都知道SSH框架,特别对于数据库开发,Java领域有无数的ORM框架,供数据持久层调用,如Hibernate,iBatis(现在改名叫MyBatis),TopLink,JDO,J ...
- DDD：订单管理 之 如何组织代码
背景 系统开发最难的是职责的合理分配,或者叫:“如何合理的组织代码”,今天说一个关于这方面问题的示例,希望大家多批评. 示例背景 参考数据字典 需求 OrderCode必须唯一. Total = Su ...
- [Python] Debugger in Pycharm
From: http://blog.csdn.net/u013088062/article/details/50214459 From: http://blog.csdn.net/u013088062 ...
- Android学习笔记之横向二级菜单实现
PS:元旦来一发. 学习内容: 1.Android二级横向菜单的实现过程.效果如上图... 这种横向的二级菜单在很多的app都有所应用.效果看起来还是非常的美观的.也算是项目需要,自己也就学了一下 ...
- Qt之自定义QLineEdit右键菜单
一.QLineEdit说明 QLineEdit是单行文本框,不同于QTextEdit,他只能显示一行文本,通常可以用作用户名.密码和搜索框等.它还提供了一些列的信号和槽,方便我们使用,有兴趣的小伙伴可 ...
- 投票系统 & 简易js刷票脚本
早就听说有什么刷票脚本,微博投票等等相关的投票都有某些人去刷票. 试一下吧,兴许自己也会刷票呢?捣鼓了几个小时,终于有所眉目. (1)投票系统 要刷票,就得先有个投票界面. 当然,可以直接去各个投票网 ...