Home >Web Front-end >JS Tutorial >Example of JavaScript controlled navigation menu

Example of JavaScript controlled navigation menu

黄舟Original: 2017-07-25 09:18:291291browse

This article mainly introduces the example code of the navigation menu controlled by js. Friends who need it can come and refer to it. I hope it will be helpful to everyone.

This menu effect is controlled by scripts and styles. , it is very good learning content for novices:

This small code was used to sort out this menu while watching Strictly Come Dancing last night. Let’s take a look at it. Once you know it, you can review the past and learn new things. No. You can learn from the idea. In fact, I just want to improve this front-end idea and make it no longer unfamiliar:

This is the menu part in the master page of asp.net

Html part:

<%@ 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>
<p 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>
</p>
</body>       
</html>

Look at the css part. This is to distinguish the selected item from other items:

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

The following is the js part that gives life to html. It makes the web page move:

$(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");
});

Okay, you can try it quickly.

The above is the detailed content of Example of JavaScript controlled navigation menu. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction and use of the treeview plug-in in bootstrapNext article：Introduction and use of the treeview plug-in in bootstrap

See more

Example of JavaScript controlled navigation menu

Related articles