一个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 相关文章推荐
Javascript将string类型转换int类型
Dec 09 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 Javascript
JavaScript中5种调用函数的方法
Mar 12 Javascript
js实现的星星评分功能函数
Dec 09 Javascript
js密码强度实时检测代码
Mar 02 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
Jun 17 Javascript
JavaScript轮播图简单制作方法
Feb 20 Javascript
iscroll动态加载数据完美解决方法
Jul 18 Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 Javascript
微信小程序实现倒计时补零功能
Jul 09 Javascript
JS实现百度网盘任意文件强制下载功能
Aug 31 Javascript
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
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.MVC的模板标签系统(五)
2006/09/05 PHP
献给php初学者(入门学习经验谈)
2010/10/12 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
js函数排序的实例代码
2013/07/01 Javascript
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
分享10个优化代码的CSS和JavaScript工具
2016/05/11 Javascript
判断JS对象是否拥有某属性的方法推荐
2016/05/12 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
JavaScript常用事件介绍
2019/01/21 Javascript
[01:06:39]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第三局
2016/03/02 DOTA
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
Python中os.path用法分析
2015/01/15 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
Python 实现异步调用函数的示例讲解
2018/10/14 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
python之线程通过信号pyqtSignal刷新ui的方法
2019/01/11 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
AmazeUI框架搭建的方法步骤(图文)
2020/08/17 HTML / CSS
资产评估专业大学生求职信
2013/09/29 职场文书
最新计算机专业自荐信
2013/10/16 职场文书
酒店工作职员求职简历的自我评价
2013/10/23 职场文书
法律工作求职自荐信
2013/10/31 职场文书
财会自我鉴定范文
2013/12/27 职场文书
《庐山的云雾》教学反思
2014/04/22 职场文书
我的老师教学反思
2014/05/01 职场文书
教师爱岗敬业演讲稿
2014/05/05 职场文书
董事长助理岗位职责
2015/02/11 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书
python入门学习关于for else的特殊特性讲解
2021/11/20 Python