菜单栏展开和收起效果(纯js)
2014年6月25日 15:36:29
需要关注的是:
1.用cookie保存用户当前点击的菜单项,不打扰后端代码
2.通过数学计算得到要显示和隐藏的div
3.点击事件是动态绑定到a标签上的,因此当dom加载完后,再执行js,也就是写在onload里
HTML如下:
<h3 class="titleH3" id="101">aaaa</h3>
<div class="subNav" id="1">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>
<h3 class="titleH3" id="102">bbbb</h3>
<div class="subNav" id="2">
<a href="#">11</a>
<a href="#">22</a>
<a href="#">33</a>
</div>
js如下:
function showhide()
{
//绑定a链接的点击事件
//点击a链接的时候将id写进cookie
var arrSubNav = document.getElementsByClassName('subNav');
for (var i = 0; i < arrSubNav.length; i++) {
var arrHref = arrSubNav[i].getElementsByTagName('a');
for (var j = 0; j < arrHref.length; j++) {
arrHref[j].onclick = function () {
var nodeParent = this.parentNode; //获取a链接所在的那个div块儿的id,注意,此处用this
var idParent = nodeParent.getAttribute('id');
document.cookie="userCheck="+idParent+";domain=***.***.com;path=/***"; //用cookie记录下用户当前的选择
}
}
} //从cookie里取值,展开指定div
userCheck = getUserCheckInfo();
if (userCheck > 0) {
for (var i = 0; i < arrSubNav.length; i++ ) {
arrSubNav[i].style.display = 'none';
}
document.getElementById(userCheck).style.display = 'block';
} else {
document.getElementById('3').style.display = 'block';
} //点击标题时展开其下的菜单
var arrTitle = document.getElementsByClassName('titleH3');
for (var i = 0; i < arrTitle.length; i++) {
arrTitle[i].onclick = function () {
var idTitle = this.getAttribute('id');
var idSubNav = idTitle % 100; //根据title的id获取子菜单div的id for (var i = 0; i < arrSubNav.length; i++ ) {
arrSubNav[i].style.display = 'none';
}
document.getElementById(idSubNav).style.display = 'block'; }
};
} function getUserCheckInfo()
{
var strCookie = document.cookie;
//将多cookie切割为多个名/值对
var arrCookie=strCookie.split("; ");
var userCheck = '0';
//遍历cookie数组,处理每个cookie对
for(var i=0;i<arrCookie.length;i++) {
var arr=arrCookie[i].split("=");
if("userCheck"==arr[0]){
userCheck=arr[1];
break;
}
}
return userCheck;
}
变量名没有起好,userCheck应该为userChoice或者userSelected更恰当,他是用来保存用户点击的菜单的id的
菜单栏展开和收起效果(纯js)的更多相关文章
- javascript 特效实现(1)——展开选项和收起效果
知识点:javascript事件:判断当前展开收起状态:延迟执行setTimeout方法. 1.简单的展开和收起效果: 1.1 静态结构HTML代码分析 body包含最外层的div id=" ...
- [原创]纯JS实现网页中多选复选框checkbox和单选radio的美化效果
图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...
- 纯js和纯css+html制作的手风琴的效果
一:纯css+html的手风琴效果 这种用css写的手风琴比较简单,主要是应用到css中的,transition属性. 代码如下: <!DOCTYPE HTML> <html> ...
- 纯js倒计时效果(交流加群:452892873)(本群每天都更新学习资料)
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 纯js实现网页tab选项卡切换效果
纯js实现网页tab选项卡切换效果 百度搜索 js 点击菜单项就可以切换内容的效果
- 右上角鼠标滑过展开收缩动画效果js代码的演示页面
http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...
- 纯js实现省市级联效果
我们都知道一般有注册的时候会让用户填入省市啊地区什么的,然后我就想使用纯js制作一个省市级联的效果,只是用于学习以及回顾温习用,首先看下效果图,界面很丑啊,不要嫌弃! 首先还是先看下我的项目目录吧 很 ...
- [分享黑科技]纯js突破localstorage存储上线,远程抓取图片,并转码base64保存本地,最终实现整个网站所有静态资源离线到用户手机效果却不依赖浏览器的缓存机制,单页应用最新黑科技
好久没有写博客了,想到2年前答应要放出源代码的也没放出来,最近终于有空先把纯js实现无限空间大小的本地存储的功能开源了,项目地址https://github.com/xueduany/localsto ...
- js 点击展开、收起
//点击展开.收起 window.onload=function(){ var current=document.getElementsByTagName('li')[0]; document.bod ...
随机推荐
- Hibernate-一对多的关系维护
一对多 和多对一 一般是看需求来确定的,很多时候都是设置成双向的 举个最最普通的离子 :一个班级里面有多个学生 多个学生属于一个班级 从学生表来看 就是多对一的关系 从班级表来看就是一对多的关系 需求 ...
- RBAC(基于角色的访问控制权限)表结构
Rbac 支持两种类,PhpManager(基于文件的) 和 DbManager(基于数据库的) 权限:就是指用户是否可以执行哪些操作 角色:就是上面说的一组操作的集合,角色还可以继承 在Yii2.0 ...
- groovy-闭包
什么是闭包 一个groovy闭包就像一个代码块或者方法指针,他是定义然后执行的一段代码,但是他有一些特性:隐含变量,支持自由变量,支持currying . 我们先来看看一些例子: 1 def clos ...
- HDU 1285 确定比赛名次
传送门 确定比赛名次 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...
- excel公式处理成绩表
一共有2个需求: 1.平均分:所有每个人的成绩/29;及格率:60分的/29;优秀率:80分/29 2.对总分进行排序,并在另一列中生成排名 平均分:=(c3+c4+.......c31)/29 及格 ...
- Yii2 初体验
看着Yii1.1有那么多的不爽,又看着Yii2一天天成熟起来,于是凑一个小项目的原型阶段,试着用Yii2搞一搞. 随手写了一点体会,以一个Yii1的熟练工人看向Yii2的视角,简单一说吧.(将来随时可 ...
- 车牌号对应归属地及城市JSON带简码
车牌号对应归属地及城市JSON带简码 car_city.json [ { "code": "冀A", "city": "石家庄&q ...
- 优秀大数据GitHub项目一览
http://blog.csdn.net/yaoxtao/article/details/50540485 优秀大数据GitHub项目一览 VMware CEO Pat Gelsinger曾说: 数据 ...
- MongoDB的增删改查 转
MongoDB的增删改查 (黎明你好原创作品,转载请注明) MongoDB中数据的基本单元叫做文档,采用json的键-值的方式.多个键及其关联的值有序的存放在一起变是文档.类似于编程语言中的键值关系. ...
- MySql数据类型详解
可配合http://www.cnblogs.com/langtianya/archive/2013/03/10/2952442.html学习 MySql数据类型 1.整型(xxxint) MySQ ...