一个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注入技巧
Jun 22 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Oct 14 Javascript
dreamweaver 安装Jquery智能提示
Apr 02 Javascript
JQuery做的一个简单的点灯游戏分享
Jul 16 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
Javascript中字符串replace方法的第二个参数探究
Dec 05 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
Feb 19 Javascript
js实现无缝滚动图
Feb 22 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
详解项目升级到vue-cli3的正确姿势
Jan 28 Javascript
javascript+Canvas实现画板功能
Jun 23 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
德劲1102收音机的打理维修案例
2021/03/02 无线电
Yii rules常用规则示例
2016/03/15 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
PHP.vs.JAVA
2016/04/29 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
php报错502badgateway解决方法
2019/10/11 PHP
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
在Node.js应用中读写Redis数据库的简单方法
2015/06/30 Javascript
JavaScript文本框脚本编写的注意事项
2016/01/25 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
JavaScript中如何判断一个值的类型
2017/09/15 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
小程序实现录音功能
2020/09/22 Javascript
Python使用urllib模块的urlopen超时问题解决方法
2014/11/08 Python
在windows下使用python进行串口通讯的方法
2019/07/02 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
python中的itertools的使用详解
2020/01/13 Python
Python猴子补丁Monkey Patch用法实例解析
2020/03/23 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
Python安装并操作redis实现流程详解
2020/10/13 Python
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
研发工程师的岗位职责
2013/11/18 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
2015年党支部公开承诺书
2015/01/22 职场文书
小学教师求职信范文
2015/03/20 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫