一个js控制的导航菜单实例代码


Posted in Javascript onDecember 03, 2013

这种菜单效果是通过脚本和样式控制的,对于新手来说是非常好的学习内容:

这种昨晚一边看舞动奇迹,一边整理这个菜单的小代码,一起来看看吧,会了可以温故知新,不会的可以借鉴一下思想,其实就是想完善一下这种前端的思想,让它不要再陌生:

这是一个asp.net的master页面里面的菜单部分

Html部分:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link type="text/css" rel="Stylesheet" href="Styles/master.css" />
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/nav.js" type="text/javascript"></script>
</head>
<body>
<div class="nav" id="nav">
     <input type="hidden" value="<%=Request.QueryString["menutemp"] %>" id="masterid" />
     <a href="Default.aspx?menutemp=0" class="check">首页</a>
     <a href="surveylist.aspx?menutemp=1">医院概况</a>
     <a href="Culturelist.aspx?menutemp=2">医院文化</a>
     <a href="Tumor dynamic list.aspx?menutemp=3">医院动态</a>
     <a href="Services list .aspx?menutemp=4">医院服务</a>
     <a href="Medical guidelines.aspx?menutemp=5">就诊指南</a>
     <a href="Introduce department.aspx?menutemp=6">科室介绍</a>
</div>
</body>        
</html>

看看css部分把,这是来区分选中项和其他项的:

#master .head .nav a.check{ background:url(../images/navbg.png) 1px 1px no-repeat; color:#fff;}

下面就是给html赋予生命的js部分,是他让网页动起来:

$(document).ready(function () {//表示要在网页加载之后运行
    var current = $("#masterid").val();//通过jquery方式获取id=masterid的页面元素的值,其实就是为了获取选中的那个菜单
    var alist = new Array();//定义数组
    if (current == "") {//要是没有获取到选中的菜单,我们就忽略这个
        current = -1;
    }
    $("#nav>a").each(function (i, items) {//这个部分就是在你点击了菜单一项后,还么有刷新页面时候的样式变化,哈哈,each是一个遍历函数,会遍历#nav>a的集合。
        alist[i] = $(items);//i是从0开始到遍历集合结束为止,自增1的
        $(alist[i]).click(function () {//对alist[i]进行注册点击事件,点击就会执行对应的方法,
            if (i != current) {//要是选择了不同的菜单项,就会给选择的菜单加上应有的样式,而之前的就会去除样式
                $(this).addClass("check");
                $(alist[current]).removeClass("check");
                current = i;//返回新选择的菜单项id
            }
        });
    });
    $("#nav>a").each(function (i, items) {//这是在页面跳转到新页面后对页面样式的处理,让菜单的样式正确调用。
        alist[i] = $(items);
        if (i != current) {
            $(alist[i]).removeClass("check");
        }
    });
    $(alist[current]).addClass("check");
});

好了,你可以赶快试一下吧。
Javascript 相关文章推荐
jquery绑定原理 简单解析与实现代码分享
Sep 06 Javascript
javascript将数组插入到另一个数组中的代码
Jan 10 Javascript
js选择并转移导航菜单示例代码
Aug 19 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
js创建对象几种方式的优缺点对比
Sep 28 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
Mar 09 Javascript
详解vue数据渲染出现闪烁问题
Jun 29 Javascript
bootstrap datepicker插件默认英文修改为中文
Jul 28 Javascript
React Form组件的实现封装杂谈
May 07 Javascript
JavaScript 跨域之POST实现方法
May 07 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
基于vue+element实现全局loading过程详解
Jul 10 Javascript
JS与C#编码解码
Dec 03 #Javascript
探讨jQuery的ajax使用场景(c#)
Dec 03 #Javascript
浅析JavaScript原型继承的陷阱
Dec 03 #Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 #Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 #Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 #Javascript
解析Javascript小括号“()”的多义性
Dec 03 #Javascript
You might like
php去掉URL网址中带有PHPSESSID的配置方法
2014/07/08 PHP
迁移PHP版本到PHP7
2015/02/06 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
javascript中的遍历for in 以及with的用法
2014/12/22 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
AngularJS 所有版本下载地址
2016/09/14 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
AngularJS中的promise用法分析
2017/05/19 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
2017/08/30 Javascript
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
深入浅析Vue.js计算属性和侦听器
2018/05/05 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
Linux下python与C++使用dlib实现人脸检测
2018/06/29 Python
Python使用Beautiful Soup爬取豆瓣音乐排行榜过程解析
2019/08/15 Python
Python Django中间件,中间件函数,全局异常处理操作示例
2019/11/08 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
Python 列表的清空方式
2020/01/13 Python
python机器学习库xgboost的使用
2020/01/20 Python
通过Turtle库在Python中绘制一个鼠年福鼠
2020/02/03 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
美国珠宝店:Helzberg Diamonds
2018/10/24 全球购物
大四本科生的自我评价
2013/12/30 职场文书
小学生红领巾广播稿
2014/01/21 职场文书
环保倡议书范文
2014/05/12 职场文书
农林经济管理专业自荐信
2014/09/01 职场文书
“向国旗敬礼”活动策划方案(4篇)
2014/09/27 职场文书
病人慰问信范文
2015/02/15 职场文书