This menu effect is controlled through scripts and styles, which is a very good learning content for novices:
Let’s take a look at this small code for sorting out this menu while watching Strictly Come Dancing last night. If you know it, you can review the past and learn new things. If you don’t know it, you can learn from it. In fact, I just want to improve this front-end idea so that it doesn’t Stranger again:
This is the menu part of an asp.net master page
Html part:
Copy the code code as follows:
<%@ 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 id="nav">
<input type="hidden" value="<%=Request.QueryString["menutemp"] %>" id="masterid" />
<a href="Default.aspx?menutemp=0">Home</a>
<a href="surveylist.aspx?menutemp=1">Hospital Overview</a>
<a href="Culturelist.aspx?menutemp=2">Hospital Culture</a>
<a href="Tumor dynamic list.aspx?menutemp=3">Hospital News</a>
<a href="Services list .aspx?menutemp=4">Hospital Services</a>
<a href="Medical guidelines.aspx?menutemp=5">Medical guidelines</a>
<a href="Introduce department.aspx?menutemp=6">Department Introduction</a>
</div>
</body>
</html>
Take a 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 and makes the web page move:
Copy the code code as follows:
$(document).ready(function () {//Indicates that it should be run after the web page is loaded
var current = $("#masterid").val();//Get the value of the page element with id=masterid through jquery, in fact, it is to get the selected menu
var alist = new Array(); //Define array
if (current == "") {//If the selected menu is not obtained, we will ignore this
current = -1;
}
$("#nav>a").each(function (i, items) {//This part is about the style change when you refresh the page after you click on a menu item. Haha, each is a traversal function , will traverse the collection of #nav>a.
alist[i] = $(items);//i starts from 0 and increases by 1 until the end of the traversed collection
$(alist[i]).click(function () {//Register the click event for alist[i], and the corresponding method will be executed when clicked.
if (i != current) {//If a different menu item is selected, the selected menu will be added with the appropriate style, and the previous style will be removed.
$(this).addClass("check");
$(alist[current]).removeClass("check");
current = i;//Return the newly selected menu item id
}
});
});
$("#nav>a").each(function (i, items) {//This is the processing of the page style after the page jumps to a new page, so that the menu style can be called correctly.
alist[i] = $(items);
if (i != current) {
$(alist[i]).removeClass("check");
}
});
$(alist[current]).addClass("check");
});
Okay, you can try it quickly.