A js controlled navigation menu instance code

2020-03-30 00:41:16
OfStack

This menu effect is controlled by scripts and styles, and is great for beginners to learn:

This kind of last night while watching strictly come dancing, while sorting out the small code of this menu, let's have a look, will be able to review the old and learn new, can not be able to borrow ideas, in fact, is to improve this front-end thinking, let it not unfamiliar:

This is the menu section of an asp.net master page

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>
<div class="nav" id="nav">
     <input type="hidden" value="<%=Request.QueryString["menutemp"] %>" id="masterid" />
     <a href="Default.aspx?menutemp=0" class="check"> Home page </a>
     <a href="surveylist.aspx?menutemp=1"> Hospital situation </a>
     <a href="Culturelist.aspx?menutemp=2"> Hospital culture </a>
     <a href="Tumor dynamic list.aspx?menutemp=3"> Hospital dynamic </a>
     <a href="Services list .aspx?menutemp=4"> Hospital services </a>
     <a href="Medical guidelines.aspx?menutemp=5"> Clinic guide </a>
     <a href="Introduce department.aspx?menutemp=6"> Department is introduced </a>
</div>
</body>        
</html>

Look at the CSS section, which is to distinguish between selected items and other items:

Nav a. heck{background:url(.. / images/navbg. PNG) 1 px 1 px no - repeat; Color: # FFF. }

Here's the js part that brings HTML to life, the part that makes web pages move:


$(document).ready(function () {//Means to run after the page loads
    var current = $("#masterid").val();//Get the value of the page element with id=masterid through jquery, just to get the selected menu
    var alist = new Array();//Define an array
    if (current == "") {//If we don't get the selected menu, we ignore this
        current = -1;
    }
    $("#nav>a").each(function (i, items) {//This section is what happens when you click on a menu item and there is no change in style when you refresh the page. Haha, each is an traversal function that traverses #nav> The set of a.
        alist[i] = $(items);//I goes from 0 to the end of the traversal of the set
        $(alist[i]).click(function () {//Register the click event on alist[I], click to execute the corresponding method,
            if (i != current) {//If a different menu item is selected, the selected menu will be styled, and the previous menu will be de-styled
                $(this).addClass("check");
                $(alist[current]).removeClass("check");
                current = i;//Returns the newly selected menu item id
            }
        });
    });
    $("#nav>a").each(function (i, items) {//This is the handling of the page style after the page jumps to a new page to make the menu style call correctly.
        alist[i] = $(items);
        if (i != current) {
            $(alist[i]).removeClass("check");
        }
    });
    $(alist[current]).addClass("check");
});

Well, you can try it quickly.