A js-controlled navigation menu example code_javascript skills

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 of sorting out this menu while watching Strictly Come Dancing last night. Once 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. Let it no longer be a stranger:

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

Html part:

Copy code The code is as follows:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

  " id="masterid" />

Homepage

Hospital Overview

  Hospital Culture

Hospital News

Hospital Services

Medical Guidelines

Department Introduction

 

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:

Copy the code The code is as follows:

$(document).ready(function () {//Indicates to 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 that traverses the collection of #nav>

.

alist[i] = $(items);//i is from 0 to the end of the traversal collection, increasing by 1

$(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;//Returns 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.