一个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的简单&amp;简陋Tabs插件代码
Feb 09 Javascript
js修改table中Td的值(定义td的双击事件)
Jan 10 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
Jun 15 Javascript
js+css实现回到顶部按钮(back to top)
Mar 02 Javascript
Javascript 动态改变imput type属性
Nov 01 Javascript
移动端点击态处理的三种实现方式
Jan 12 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
Aug 09 Javascript
详解在Node.js中发起HTTP请求的5种方法
Jan 10 Javascript
vue 解决遍历对象显示的顺序不对问题
Nov 07 Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 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数据库抽象层 PDO
2011/05/07 PHP
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
通过bootstrap全面学习less
2016/11/09 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
浅谈Webpack多页应用HMR卡住问题
2019/04/24 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
在nodejs中创建child process的方法
2021/01/26 NodeJs
详解django的serializer序列化model几种方法
2018/10/16 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
Django 配置多站点多域名的实现步骤
2019/05/17 Python
tensorflow之自定义神经网络层实例
2020/02/07 Python
团工委书记自荐书范文
2013/12/17 职场文书
小学防溺水制度
2014/01/29 职场文书
法学专业自我鉴定
2014/02/05 职场文书
仓库主管岗位职责
2014/03/02 职场文书
读群众路线的心得体会
2014/09/03 职场文书
单位租房协议书样本
2014/10/30 职场文书
法学专业求职信范文
2015/03/19 职场文书
餐饮店长岗位职责
2015/04/14 职场文书
民间借贷借条范本
2015/05/25 职场文书
婚庆主持词大全
2015/06/30 职场文书
教师远程研修感悟
2015/11/18 职场文书
python实现黄金分割法的示例代码
2021/04/28 Python
纯html+css实现Element loading效果
2021/08/02 HTML / CSS
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL